¿Cómo construirías un diálogo modal accesible en React?

Usa el elemento nativo dialog con showModal siempre que puedas, porque te da la capa superior, la captura del foco y el manejo de Escape gratis. Si no, necesitas role dialog con aria-modal, un encabezado que lo etiquete, el foco movido al diálogo al abrirlo y devuelto al disparador al cerrarlo, una trampa de foco, Escape para descartar y el fondo marcado como inert para que ni los lectores de pantalla ni el tabulador se paseen por él.

Mi primer movimiento es no construirlo. El elemento nativo dialog con showModal se encarga de la capa superior, así que dejo de pelearme con z-index y con ancestros que tienen overflow hidden, y me da Escape y el fondo inert sin nada de código mío. Encima de eso lo sigo etiquetando, con aria-labelledby apuntando al encabezado, y muevo el foco a un primer elemento sensato al abrir, normalmente el encabezado o el primer campo en lugar del botón de cerrar. Al cerrar devuelvo el foco a lo que lo abrió, porque perder el foco en el body es lo que de verdad deja tirada a la gente que navega con teclado. Si tengo que hacerlo a mano por razones de navegador o de diseño, entonces es role dialog con aria-modal en true, una trampa de foco real con Tab y Shift Tab, Escape y clic en el fondo para descartar, inert en el resto de la página, y bloqueo de scroll que no desplace el layout. Lo pruebo primero solo con teclado y después con un lector de pantalla, porque esa combinación atrapa casi todo lo que a un validador automático se le escapa.