reactjs/react-modal

Focus escapes modal when radio buttons in modal

Offen

#636 geöffnet am 29.03.2018

Auf GitHub ansehenContributor Guide
 (8 Kommentare) (11 Reaktionen) (0 zugewiesene Personen)JavaScript (828 Forks)batch import
accessibilitybugeasygood first issue

Repository-Metriken

Stars
 (7.294 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

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

Research-Richtung
Untersuche die Fokus Fanglogik in der Modal Komponente, wahrscheinlich in Dateien wie 'src/components/Modal.js' oder ähnlichen. Der bereitgestellte CodeSandbox (https://codesandbox.io/s/my9vm34m68) demonstriert das Problem mit dem Entkommen per Shift+Tab, wenn Radio Buttons vorhanden sind. Überprüfe den Fokus Management Code, insbesondere wie er mit dem ersten und letzten fokussierbaren Element umgeht, und stelle sicher, dass Radio Buttons korrekt in die Fokus Reihenfolge eingeschlossen werden. Erwäge die Verwendung einer Fokus Fang Bibliothek wie 'focus trap' oder passe die bestehende Implementierung an, um das Fokusverhalten der Radio Button Gruppe zu handhaben.
Tech Stack
reactjavascript
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
React
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75