reactjs/react-modal

Focus escapes modal when radio buttons in modal

Ouverte

#636 ouverte le 29 mars 2018

Voir sur GitHubGuide contributeur
 (8 commentaires) (11 réactions) (0 personne assignée)JavaScript (828 forks)batch import
accessibilitybugeasygood first issue

Métriques du dépôt

Stars
 (7 294 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

Summary:

When there are radio buttons in a modal, you can escape focus with shift-tab.

Steps to reproduce:

Steps are included in the test case below

Expected behavior:

You should not be able to escape the modal's focus

Link to example of issue:

https://codesandbox.io/s/my9vm34m68

Additional notes:

Not sure if it's related specifically to radio buttons, but that is what is causing the issue for me

Guide contributeur

Direction de recherche
Étudiez la logique de piégeage du focus dans le composant modal, probablement dans des fichiers comme 'src/components/Modal.js' ou similaires. Le CodeSandbox fourni (https://codesandbox.io/s/my9vm34m68) démontre le problème de fuite avec Shift+Tab lorsque des boutons radio sont présents. Examinez le code de gestion du focus, en particulier comment il gère le premier et le dernier élément pouvant recevoir le focus, et assurez vous que les boutons radio sont correctement inclus dans l'ordre de focus. Envisagez d'utiliser une bibliothèque de piégeage du focus comme 'focus trap' ou ajustez l'implémentation existante pour gérer le comportement de focus du groupe de boutons radio.
Stack technique
reactjavascript
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
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
React
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75