reactjs/react-modal

Pressing enter key to close button closes the modal but the event is attached to opener element and reopens the modal

Aberta

#954 aberto em 18 de jun. de 2022

Ver no GitHubGuia do colaborador
 (12 comentários) (0 reação) (0 responsável)JavaScript (828 forks)batch import
discussioneventshelp wantedmaybe bugneeds info

Métricas do repositório

Stars
 (7.294 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

Summary:

Steps to reproduce:

  1. Visit my demo on Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js
  2. Click 'Open Modal' button and press Tab. This will focus the close button
  3. Press Enter this closes the modal but reopens it. I know this is because of the onKeyUp event listener to anchor tag but this function is needed for other purposes.

Expected behavior:

Closes modal and focus move to the opener element( in this case, anchor tag)

Link to example of issue:

Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js

Additional notes:

Is there a way to solve this issue without removing the onKeyUp event handler?

Thanks.

Guia do colaborador

Direção de pesquisa
Comece examinando o CodeSandbox fornecido (https://codesandbox.io/s/react modal vivyxc) para entender a estrutura atual do componente modal. Concentre se no manipulador de eventos onKeyUp anexado à tag âncora (elemento de abertura) e em como ele interage com o botão de fechar do modal. Investigue se adicionar event.stopPropagation() ou verificar o alvo do evento no manipulador pode impedir que o modal seja reaberto após o fechamento. Revise também a lógica de gerenciamento de foco do modal para garantir que o foco retorne corretamente ao elemento de abertura. Procure por quaisquer comentários existentes ou sugestões dos mantenedores no tópico da issue.
Pilha de tecnologia
reactjavascript
Domain
frontendaccessibility
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
ReactJavaScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70