Accessibilité: Gestion des focus a chaque chargement de page

[Solenn0806]

Les pages sont des SPA, (Single Page Application), la gestion du focus n'est pas mise en place à chaque "changement" de page.

Solution #1 : le lien classique
Lorsque l'élément interactif est un lien (élément ) et que cet élément mène vers une nouvelle page (rechargement complet) :
Le titre de la page est mis à jour
Ne rien faire d'autre de spécifique

Solution #2 : simuler des changements de pages (conseillée au vu de la structure des pages)
Lorsque le comportement attendu est celui d'un lien, mais que le rechargement n'est pas complet :
L'élément déclencheur doit être un lien (élément ou élément avec le role="link") ✅
Le titre de la page est mis à jour✅
le titre de la page est restitué dans les assistances technologiques grâce à du texte placé au tout début de la page (avant le lien d’accès rapide ) et caché (avec la classe .sr-only) qui sert également de zone cible pour le focus
le focus clavier est géré comme si un rechargement de page avait eu lieu (grâce à la position du texte caché)
Cette méthode est détaillée dans cet article : https://hugogiraudel.com/2020/01/15/accessible-title-in-a-single-page-react-application/

Solution #3 : conserver les interactions dans une zone donnée
Lorsque le comportement attendu est celui d'un bouton :
L'élément déclencheur doit être un bouton (élément ou élément avec le role="button")
Gérer le focus de manière logique, il devra aller vers un élément de la zone qui vient d'être mise à jour (à déterminer en fonction des cas rencontrés)