Semantic-Org/Semantic-UI-React

Modal: implement focus trap

Open

#2.278 aberto em 1 de nov. de 2017

Ver no GitHub
 (8 comments) (10 reactions) (0 assignees)JavaScript (4.065 forks)batch import
enhancementhelp wantedstale

Métricas do repositório

Stars
 (13.136 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

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

Guia do colaborador

Direção de pesquisa
Revise os arquivos de origem do componente Modal (provavelmente em src/modules/Modal/) para entender a estrutura atual. Implemente uma armadilha de foco usando uma ref ao contêiner do modal, capturando o primeiro e o último elemento focalizável e ciclando o foco por meio de ouvintes de eventos keydown. Considere aproveitar o atributo tabindex e as diretrizes de diálogo modal ARIA. Os comentários existentes na issue podem fornecer contexto adicional.
Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
Acessibilidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
JavaScriptReactAccessibility concepts
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
75