reactjs/react-modal

Focus escapes modal when radio buttons in modal

Open

#636 geöffnet am 29. März 2018

Auf GitHub ansehen
 (8 Kommentare) (11 Reaktionen) (0 zugewiesene Personen)JavaScript (7.294 Stars) (828 Forks)batch import
accessibilitybugeasygood first issue

Beschreibung

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

Contributor Guide

Tech Stack
reactjavascript
Domain
frontendaccessibility
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
React basicsFocus management in web appsUnderstanding of tab order
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
65
Research-Richtung
Investigate the focus trapping logic in the modal component, likely in files like 'src/components/Modal.js' or similar. The provided CodeSandbox (https://codesandbox.io/s/my9vm34m68) demonstrates the issue with Shift+Tab escaping when radio buttons are present. Review the focus management code, particularly how it handles the first and last focusable elements, and ensure radio buttons are properly included in the focus order. Consider using a focus trap library like 'focus trap' or adjusting the existing implementation to handle the radio button's group focus behavior.