reactjs/react-modal

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

Open

#226 opened on Sep 19, 2016

View on GitHub
 (2 comments) (2 reactions) (0 assignees)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

Contributor guide

Tech stack
reactjavascripthtmlcss
Domain
accessibilityfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactFocus managementAccessibility basicsNode.js/npm
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
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.