Superposiciones

Dialog

Con librería, y el hueco es medible: <dialog> ya da foco, Escape, ::backdrop, inert y retorno de foco al 96% de los navegadores — pero no bloquea el desplazamiento del fondo, y en iOS el rebote sigue moviendo la página de detrás. Eso es lo que se compra.

🎹 Con el teclado: Tab da la vuelta dentro y no se escapa · Escape cierra · al cerrar, el foco vuelve al botón que lo abrió — pruébalo sin tocar el ratón. Y con la rueda: mueve el fondo con el diálogo abierto; no se mueve.

El de la derecha es alert: role="alertdialog", y su acción destructiva va en el cuerpo, nunca en el pie. El pie es donde el dedo aterriza sin leer, y la regla local no-destructive-in-dialog-footer lo impide en toda la aplicación, no solo aquí.

Menu

Con librería. La plataforma ya da capa superior y posicionamiento anclado, pero no da navegación con flechas (roving tabindex), y para submenús el único candidato (interestfor) es solo Chromium y sin especificación.

🎹 Enter o ↓ abren · las flechas recorren y dan la vuelta · escribir una letra salta al primero que empieza por ella · Escape cierra y devuelve el foco al disparador.

El último trae detail, la segunda línea. Las dos primeras filas se llaman igual porque así llegan de verdad: un nombre de pantalla de Zitadel no es único. 🎧 Escúchalo con un lector: las dos líneas se funden en un nombre accesible («Ana Pérez user:0193ab»), no en dos anuncios sueltos — es name from contents, y por eso no va como aria-describedby: una descripción se puede silenciar subiéndole la verbosidad, y esto es justo lo que no puede callarse. El tipo es string, no ReactNode: una fila de menú no puede volverse una tarjeta con controles dentro que las flechas no alcanzan.

Tooltip

Con librería, y el hueco que compra es concreto: los tres requisitos de SC 1.4.13. El caro es señalable — que el puntero pueda viajar hasta el bocadillo sin que se cierre. Ninguna primitiva de plataforma lo da hoy (el anclaje por CSS va por el 84% y interestfor por el 67%, solo Chromium).

🎹 Con el teclado: Tab hasta un botón y el bocadillo sale solo — title no hace eso. Escape lo cierra sin mover el foco. Y con el ratón: entra al bocadillo, que no se te cierra por el camino.

Toggletip

Copiado de Carbon: su ToggletipButton cablea onClick, nunca onMouseEnter ni onFocus — al revés que su propio Tooltip.js, que trae los dos. Sobre Popover de Radix: mismo cierre por clic-fuera, Escape y foco perdido que Carbon cablea a mano, sin escribirlo.

🎹 Con el teclado: Tab hasta el botón, Enter o Espacio lo abren, y Escape lo cierra y devuelve el foco. 👆 Con el dedo: un tap lo abre igual que un clic — a diferencia de Tooltip, que en táctil nunca se abre.