electerious / electerious/basicLightbox

Managing focus

Ouverte
#28 9 commentaires 6 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
604
Forks
57
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

Looking at the demos it looks like there is some focus management missing on the modals. Here's what needs to be added to fix it:

* When a modal is open, focus should be sent to the modal (either on the element itself via .focus() and tabindex="-1" or sent to the first interactive element.

* When a modal is open, focus should be trapped inside the modal (so you can't access elements behind it when tabbing with the keyboard).

* When a modal is open, pressing the escape key should close the modal.

* It would be nice if the modals had an explicit close button with an accessible name (e.g. `X`.

* When a modal is closed, focus should be send back to the element which opened it.

An example of an accessible modal:
http://edenspiekermann.github.io/a11y-dialog/example/

The WAI-ARIA authoring practices guide on modals:
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Piste de recherche

Commencez par localiser l’implémentation de la fenêtre modale et les démos référencées dans l’issue, puis comparez leur comportement avec les exemples de fenêtres modales accessibles liés. Le travail est terminé lorsque l’ouverture, la navigation avec Tab, l’utilisation de la touche Échap, la fermeture et la restauration du focus se comportent comme décrit, et qu’un contrôle de fermeture accessible est présent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
accessibility, frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.