Semantic-Org/Semantic-UI-React

Modal: implement focus trap

Open

#2.278 geöffnet am 1. Nov. 2017

Auf GitHub ansehen
 (8 Kommentare) (10 Reaktionen) (0 zugewiesene Personen)JavaScript (4.065 Forks)batch import
enhancementhelp wantedstale

Repository-Metriken

Stars
 (13.136 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

Modal should not let focus leave the components inside the dialog. Also it should autofocus the first component in the dialog (if no autofocus was specified).

More on Modals and keyboard traps: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

Steps

  1. Open any modal on the example page: https://react.semantic-ui.com/modules/modal
  2. Press tab multiple times

Expected Result

Focus should never enter the dimmed components below

Actual Result

Focus does enter the dimmed components below

Version

Current Tested in Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Testcase

https://react.semantic-ui.com/modules/modal

Contributor Guide

Research-Richtung
Überprüfe die Quellcodedateien der Modal Komponente (wahrscheinlich in src/modules/Modal/), um die aktuelle Struktur zu verstehen. Implementiere eine Fokusfalle, indem du eine Ref auf den Modal Container verwendest, das erste und letzte fokussierbare Element erfassst und den Fokus über Keydown Event Listener zyklisch steuerst. Ziehe die Nutzung des tabindex Attributs und der ARIA Modal Dialog Richtlinien in Betracht. Bestehende Kommentare im Issue können zusätzlichen Kontext liefern.
Tech Stack
javascriptreact
Domain
frontend
Issue Type
Barrierefreiheit
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.
Halber Tag
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
JavaScriptReactAccessibility concepts
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75