Piège de focus d’une boîte de dialogue modale

Silktide repère les pages qui contiennent une boîte de dialogue modale - une fenêtre contextuelle qui bloque l’interaction avec le reste de la page - et vous demande de vérifier que le focus clavier est géré correctement pendant que la boîte de dialogue est ouverte. Il s’agit d’un examen manuel : les tests automatisés peuvent trouver la boîte de dialogue, mais ne peuvent pas observer son comportement à l’ouverture et à la fermeture.

Pourquoi c’est important

Pendant qu’une boîte de dialogue modale est ouverte, la page derrière elle est visible, mais inerte. Si le peut s’échapper de la boîte de dialogue, les personnes qui naviguent au clavier et celles qui utilisent un se retrouvent à parcourir, à la touche Tabulation, du contenu qu’elles ne peuvent ni voir ni utiliser, lisent la page en dessous hors contexte et perdent complètement leur position. Et si le focus n’est pas restitué à la fermeture de la boîte de dialogue, elles sont renvoyées en haut de la page et doivent revenir à l’endroit où elles étaient.

Comment corriger

Ouvrez chaque boîte de dialogue de la page et vérifiez uniquement au clavier :

À l’ouverture de la boîte de dialogue, le focus s’y déplace - généralement vers le premier contrôle ou vers la boîte de dialogue elle-même.
En appuyant sur Tabulation et Maj+Tabulation, la navigation parcourt en boucle les contrôles de la boîte de dialogue sans jamais atteindre la page en arrière-plan.
L’appui sur Échap ferme la boîte de dialogue (pour les boîtes de dialogue qui peuvent être fermées).
À la fermeture de la boîte de dialogue, le focus revient à l’élément qui l’a ouverte.

Si l’une de ces vérifications échoue, corrigez l’implémentation de votre boîte de dialogue. L’élément natif <dialog> ouvert avec showModal() fournit la plupart de ces comportements d’emblée; les boîtes de dialogue personnalisées doivent être gérées par script. Si tout se comporte correctement, le constat.

Comment Silktide teste cela

Rechercher des indices qu’une page contient une boîte de dialogue modale : un élément <dialog> natif, un élément avec role=\"dialog\" ou role=\"alertdialog\", un élément avec aria-modal=\"true\", ou un élément avec un nom de classe de style « modal » usuel qui contient aussi des contrôles pouvant recevoir le focus.
Si l’un de ces éléments est trouvé, afficher une demande d’examen pour la page.

Silktide ne peut pas ouvrir la boîte de dialogue ni observer le comportement du focus à l’exécution, donc ce contrôle n’échoue jamais automatiquement - on vous demande de vérifier.

Dépannage

La page n’a pas de boîte de dialogue modale visible

De nombreux sites incluent du balisage de dialogue dans chaque page (une fenêtre contextuelle d’infolettre, une boîte de dialogue de témoins, une superposition de recherche masquée) qui n’apparaît que dans certaines conditions. L’invite s’applique quand même : vérifiez le comportement de la boîte de dialogue dans l’état où elle s’ouvre. Si ce balisage est un résidu qui ne peut jamais s’ouvrir, envisagez de le supprimer.

Nos boîtes de dialogue proviennent d’une bibliothèque tierce

Les bibliothèques de dialogue bien connues gèrent généralement correctement le focus, mais la configuration et le contenu personnalisé peuvent le briser. Vérifiez le comportement sur vos propres pages plutôt que de vous fier à la documentation de la bibliothèque.