reactjs/react-modal

Focus escapes modal when radio buttons in modal

Open

#636 aberto em 29 de mar. de 2018

Ver no GitHub
 (8 comments) (11 reactions) (0 assignees)JavaScript (828 forks)batch import
accessibilitybugeasygood first issue

Métricas do repositório

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

Description

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

Guia do colaborador

Direção de pesquisa
Investigue a lógica de captura de foco no componente modal, provavelmente em arquivos como 'src/components/Modal.js' ou similares. O CodeSandbox fornecido (https://codesandbox.io/s/my9vm34m68) demonstra o problema de escape com Shift+Tab quando botões de rádio estão presentes. Revise o código de gerenciamento de foco, particularmente como ele lida com o primeiro e o último elemento focalizável, e garanta que os botões de rádio sejam devidamente incluídos na ordem de foco. Considere usar uma biblioteca de captura de foco como 'focus trap' ou ajustar a implementação existente para lidar com o comportamento de foco do grupo de botões de rádio.
Pilha de tecnologia
reactjavascript
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
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
React
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
75