Trampa de foco en diálogo modal
Silktide identifica páginas que contienen un diálogo modal —una ventana emergente que bloquea la interacción con el resto de la página— y te pide que verifiques que el foco del teclado se gestiona correctamente mientras el diálogo está abierto. Se trata de una revisión manual: las pruebas automáticas pueden encontrar el diálogo, pero no observar cómo se comporta al abrirse y cerrarse.
Por qué es importante
Mientras un diálogo modal está abierto, la página detrás es visible pero inerte. Si el puede escapar del diálogo, las personas que usan teclado y acaban moviéndose con Tab por contenido que no pueden ver ni usar, leyendo la página de debajo fuera de contexto y perdiendo por completo su posición. Y si no se devuelve el foco cuando el diálogo se cierra, reaparecen en la parte superior de la página y deben volver a navegar hasta donde estaban.
Cómo solucionarlo
Abre cada diálogo de la página y verifica usando solo el teclado:
- Cuando se abre el diálogo, el foco se mueve a su interior —normalmente al primer control o al propio diálogo.
- Al pulsar Tab y Mayús+Tab, se recorren en ciclo los controles del diálogo sin llegar nunca a la página que hay detrás.
- Al pulsar Esc se cierra el diálogo (para los diálogos que se pueden descartar).
- Al cerrarse el diálogo, el foco vuelve al elemento que lo abrió.
Si alguno de estos puntos falla, corrige la implementación del diálogo. El elemento nativo <dialog> abierto con showModal() proporciona la mayor parte de este comportamiento de forma nativa; los diálogos personalizados requieren programarlo mediante scripts. Si todo se comporta correctamente, el hallazgo.
Cómo lo comprueba Silktide
- Busca indicios de que una página contiene un diálogo modal: un elemento
<dialog>nativo, un elemento conrole=\"dialog\"orole=\"alertdialog\", un elemento conaria-modal=\"true\", o un elemento con un nombre de clase habitual de estilo modal que además contenga controles que pueden recibir el foco. - Si se encuentra cualquiera de estos, se muestra un único aviso de revisión para la página.
Silktide no puede abrir el diálogo ni observar el comportamiento del foco en tiempo de ejecución, por lo que esta comprobación nunca falla automáticamente — te pide que lo verifiques.
Solución de problemas
La página no tiene ningún diálogo modal visible
Muchos sitios incluyen el marcado de diálogos en todas las páginas (un emergente de boletín informativo, un diálogo de cookies, una superposición de búsqueda oculta) que solo aparece en determinadas condiciones. El aviso sigue siendo válido: verifica el comportamiento del diálogo en el estado en el que se abre. Si el marcado es un remanente que nunca puede abrirse, plantéate eliminarlo.
Nuestros diálogos provienen de una biblioteca de terceros
Las bibliotecas de diálogos conocidas suelen gestionar el foco correctamente, pero la configuración y el contenido personalizado pueden romperlo. Verifica el comportamiento en tus propias páginas en lugar de confiar en la documentación de la biblioteca.