Comment construiriez-vous une boîte de dialogue modale accessible en React ?

Utilisez l'élément natif dialog avec showModal quand vous le pouvez, puisqu'il vous donne gratuitement la couche supérieure, le piégeage du focus et la gestion d'Échap. Sinon il vous faut role dialog avec aria-modal, un titre qui l'étiquette, le focus déplacé dans la boîte à l'ouverture et rendu au déclencheur à la fermeture, un piège à focus, Échap pour fermer, et l'arrière-plan rendu inerte pour que ni les lecteurs d'écran ni la touche Tab n'y errent.

Mon premier réflexe, c'est de ne pas la construire. L'élément natif dialog avec showModal gère la couche supérieure, donc j'arrête de me battre avec le z-index et les ancêtres en overflow hidden, et il me donne Échap et l'inertie de l'arrière-plan sans une ligne de mon code. Par-dessus, je l'étiquette quand même, donc aria-labelledby pointant vers le titre, et je déplace le focus vers un premier élément sensé à l'ouverture, en général le titre ou le premier champ plutôt que le bouton de fermeture. À la fermeture, je remets le focus sur ce qui l'a ouverte, parce que perdre le focus sur le body est ce qui laisse vraiment les utilisateurs au clavier en rade. Si je dois la faire à la main pour des raisons de navigateur ou de design, alors c'est role dialog avec aria-modal true, un vrai piège à focus sur Tab et Maj Tab, Échap et clic sur le fond pour fermer, inert sur le reste de la page, et un verrouillage du défilement qui ne décale pas la mise en page. Je la teste au clavier seul d'abord, puis avec un lecteur d'écran, parce que cette combinaison attrape presque tout ce qu'un vérificateur automatique manque.