Semantic-Org/Semantic-UI-React

Modal: implement focus trap

Open

#2278 aperta il 1 nov 2017

Vedi su GitHub
 (8 commenti) (10 reazioni) (0 assegnatari)JavaScript (4065 fork)batch import
enhancementhelp wantedstale

Metriche repository

Star
 (13.136 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Rivedi i file sorgente del componente Modal (probabilmente in src/modules/Modal/) per comprenderne la struttura attuale. Implementa una trappola per il focus utilizzando un ref al contenitore modale, catturando il primo e l'ultimo elemento focalizzabile e ciclando il focus tramite listener di eventi keydown. Considera l'utilizzo dell'attributo tabindex e delle linee guida per i dialoghi modali ARIA. I commenti esistenti nell'issue potrebbero fornire ulteriore contesto.
Tech stack
javascriptreact
Dominio
frontend
Tipo issue
Accessibilità
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
JavaScriptReactAccessibility concepts
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
75