reactjs/react-modal

Replace focus trap with `inert`

Open

#1 011 ouverte le 29 mars 2023

Voir sur GitHub
 (1 commentaire) (4 réactions) (0 assignés)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.

Guide contributeur

Stack technique
reactjavascript
Domaine
accessibilityfrontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
React component structurefocus trap conceptHTML inert attribute
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
55
Direction de recherche
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.