reactjs/react-modal

Focus escapes modal when the last element in the modal is an iframe

Open

#226 ouverte le 19 sept. 2016

Voir sur GitHub
 (2 commentaires) (2 réactions) (0 assignés)JavaScript (7 294 stars) (828 forks)batch import
bughelp wanted

Description

Summary:

When an iframe is the last element in the modal, focus escapes the modal when using keyboard navigation. This is problematic particularly for screen reader users since the rest of the DOM has aria-hidden set to true. Screen readers are no longer able to access the modal once focus has escaped from it. I used Chrome Version 53.0.2785.116 (64-bit).

Steps to reproduce:

  1. Unzip the modal-test.zip file
  2. Run npm install
  3. Run npm run build
  4. Run node index.js
  5. Navigate to page and tab through until focus escapes the modal (wikipedia has a lot of links so tabbing takes awhile)

Expected behavior:

Focus should be contained within the modal even if an iframe is the last element in the modal.

modal-test.zip

Guide contributeur

Stack technique
reactjavascripthtmlcss
Domaine
accessibilityfrontend
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.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
ReactFocus managementAccessibility basicsNode.js/npm
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65
Direction de recherche
Investigate the focus trapping mechanism in the React Modal component, particularly the logic that manages keyboard navigation within the modal. Look at the source files under the src/ directory for functions handling focus and iframe elements. Consider testing with the provided test case to reproduce the issue. There may be existing discussions or references in the repository's issues or pull requests that offer insights.