Semantic-Org/Semantic-UI-React

Modal: implement focus trap

Open

#2 278 ouverte le 1 nov. 2017

Voir sur GitHub
 (8 commentaires) (10 réactions) (0 assignés)JavaScript (4 065 forks)batch import
enhancementhelp wantedstale

Métriques du dépôt

Stars
 (13 136 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

Modal should not let focus leave the components inside the dialog. Also it should autofocus the first component in the dialog (if no autofocus was specified).

More on Modals and keyboard traps: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

Steps

  1. Open any modal on the example page: https://react.semantic-ui.com/modules/modal
  2. Press tab multiple times

Expected Result

Focus should never enter the dimmed components below

Actual Result

Focus does enter the dimmed components below

Version

Current Tested in Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Testcase

https://react.semantic-ui.com/modules/modal

Guide contributeur

Direction de recherche
Examinez les fichiers source du composant Modal (probablement dans src/modules/Modal/) pour comprendre la structure actuelle. Implémentez un piège de focus en utilisant une ref sur le conteneur modal, en capturant les premier et dernier éléments focalisables et en faisant circuler le focus via des écouteurs d'événements keydown. Envisagez d'utiliser l'attribut tabindex et les directives de boîte de dialogue modale ARIA. Les commentaires existants dans l'issue peuvent fournir un contexte supplémentaire.
Stack technique
javascriptreact
Domaine
frontend
Type d'issue
Accessibilité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Une demi journée
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
JavaScriptReactAccessibility concepts
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75