reactjs/react-modal

Pressing enter key to close button closes the modal but the event is attached to opener element and reopens the modal

Open

#954 ouverte le 18 juin 2022

Voir sur GitHub
 (12 commentaires) (0 réactions) (0 assignés)JavaScript (828 forks)batch import
discussioneventshelp wantedmaybe bugneeds info

Métriques du dépôt

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

Description

Summary:

Steps to reproduce:

  1. Visit my demo on Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js
  2. Click 'Open Modal' button and press Tab. This will focus the close button
  3. Press Enter this closes the modal but reopens it. I know this is because of the onKeyUp event listener to anchor tag but this function is needed for other purposes.

Expected behavior:

Closes modal and focus move to the opener element( in this case, anchor tag)

Link to example of issue:

Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js

Additional notes:

Is there a way to solve this issue without removing the onKeyUp event handler?

Thanks.

Guide contributeur

Direction de recherche
Commencez par examiner le CodeSandbox fourni (https://codesandbox.io/s/react modal vivyxc) pour comprendre la structure actuelle du composant modal. Concentrez vous sur le gestionnaire d'événements onKeyUp attaché à la balise d'ancrage (élément d'ouverture) et sur la façon dont il interagit avec le bouton de fermeture du modal. Recherchez si l'ajout de event.stopPropagation() ou la vérification de la cible de l'événement dans le gestionnaire peut empêcher le modal de se rouvrir après sa fermeture. Examinez également la logique de gestion du focus du modal pour vous assurer que le focus revient correctement à l'élément d'ouverture. Cherchez tous les commentaires existants ou suggestions des mainteneurs dans le fil de discussion de l'issue.
Stack technique
reactjavascript
Domaine
frontendaccessibility
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
ReactJavaScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70