reactjs/react-modal

Replace focus trap with `inert`

Open

#1.011 aberto em 29 de mar. de 2023

Ver no GitHub
 (1 comment) (4 reactions) (0 assignees)JavaScript (7.294 stars) (828 forks)batch import
accessibilitybrowser apicombining librariesdependenciesdiscussioneasyfeaturegood first issue

Description

Now that browsers have good support for inert, could we consider replacing the custom focus trap logic with this?

Alternatively, we could use the dialog element so we get this behaviour for free.

Guia do colaborador

Pilha de tecnologia
reactjavascript
Domain
accessibilityfrontend
Tipo Issue
feature
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.
half day
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
React component structurefocus trap conceptHTML inert attribute
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
55
Direção de pesquisa
Investigate the current focus trap implementation in react modal (likely in src/modal.js or similar). Determine whether the `inert` attribute can be applied to the modal's backdrop or content. Consider the two approaches: adding `inert` to siblings or using the native `<dialog>` element. Check browser support and fallback for older browsers. Review the existing comment for maintainer feedback.