Conserver le focus sur la fermeture d'un modal ou d'un flyout

Question

J'ai une question sur l'accessibilité. Il existe plusieurs couches/modales ou fenêtres volantes qui sont ouvertes en cliquant sur un bouton ou un lien.

Je devrai garder le focus sur l'élément d'origine sur lequel on a cliqué pour ouvrir un modal ou un pop-up ou un flyout une fois qu'ils sont fermés le focus devrait revenir à l'élément cliqué.

Actuellement quand je onglet sur la page après la fermeture des fenêtres modales ou flyouts, point à partir de begining

je suis en utilisant des fenêtres modales d'amorçage angulaire et l'icône déroulante personnalisés ouverts avec la configuration du fournisseur d'état angulaire.

Answer 1

résolu le problème ci-dessus en préservant l'orientation actuelle avant d'ouvrir le modal et rétablir le focus lorsque modal est fermé

Answer 2

La recommandation officielle de WAI-ARIA Authoring Practices - Modal Dialog états:

Lorsqu'un dialogue se ferme, le focus retourne à l'élément qui a appelé le dialogue sauf si:

• L'élément invoquant n'existe plus. Ensuite, le focus est défini sur un autre élément qui fournit un flux de travail logique.
• La conception de flux de travail comprend les conditions suivantes qui peuvent parfois faire la focalisation d'un élément différent d'un choix plus logique:
  1. Il est très peu probable les utilisateurs ont besoin de ré-invoquer immédiatement la boîte de dialogue.
  2. La tâche terminée dans la boîte de dialogue est directement liée à une étape ultérieure du flux de travail.

Pour replacer le focus sur l'élément qui a été porté avant votre modal ouvert:

1. Avant d'ouvrir le modal, enregistrer une référence à document.activeElement. Après la fermeture du modal, focus la référence à la activeElement précédente.

Exemple:

let previousActiveElement = document.activeElement; 
// Open and close the modal 
if (document.body.contains(previousActiveElement)) { 
    previousActiveElement.focus(); 
} 

Answer 3

Pour replacer le focus sur l'élément qui a été porté avant votre modal ouvert:

Avant d'ouvrir le modal, enregistrer une référence à document.activeElement. Après avoir fermé le modal, concentrez la référence sur le paramètre activeElement précédent.