Modals & Overlays

Cuando un modal abre, Tab y Shift+Tab deben ciclar solo entre los elementos enfocables del dialog, envolviendo en ambos extremos. Al cerrar, el foco regresa programáticamente al elemento disparador. Requerido por WCAG 2.1.2.

En dialogs destructivos o inesperados, focaliza el heading o el boton menos destructivo. En dialogs informativos breves, focaliza el boton de cerrar. Solo focaliza el primer input cuando el usuario abrio intencionalmente un formulario corto y familiar.

Todo dialog debe incluir al menos un boton visible que lo cierre, independiente del soporte de Escape. El area clickeable minima es 44x44 px segun WCAG 2.5.5 y Apple HIG; el icono puede ser de 16 px dentro de ese contenedor.

Material Design 3 especifica max-width: 560 dp. Por debajo de 600 dp (movil portrait) el dialog debe pasar a presentacion full-screen para mantener margenes de lectura comodos y targets tactiles adecuados.

Cuando el dialog requiere respuesta inmediata (vencimiento de sesion, confirmacion destructiva), usa role='alertdialog' con aria-labelledby apuntando al titulo y aria-describedby al cuerpo. Los lectores de pantalla anuncian el contenido inmediatamente al abrir.

Toasts con auto-dismiss deben permanecer visibles al menos 4 segundos. Escala ~1 s por cada 3 palabras adicionales sobre base de 5 palabras. Los toasts de error nunca deben auto-cerrarse. Usa role='status' y aria-live='polite'.

Las confirmaciones repetidas para acciones de bajo riesgo producen desensibilizacion tipo "cry wolf": el usuario hace clic sin leer. Reserva el dialog para destruccion de datos, gasto significativo o acciones que no se pueden deshacer. Los labels de botones deben describir el resultado, no "Si / No".

El overlay detras del modal debe usar negro a 40-50% de opacidad. Mas oscuro del 60% desorienta al quitar contexto espacial; mas claro del 25% falla en indicar que el fondo esta bloqueado. En browsers modernos, backdrop-filter: blur(4px) con 20-30% es una alternativa elegante.

El costo de un modal es la interrupcion de la tarea actual. Solo se justifica cuando falta informacion requerida, se va a ejecutar una accion irreversible, o un error bloquea el progreso. Para mensajes informativos usa toast, banner, o panel lateral.

Date pickers, menus y selectores deben cerrarse al hacer clic en el scrim. Los dialogs de confirmacion destructiva y formularios con datos sin guardar no deben cerrarse con outside-click; requieren una accion explicita de Cancelar. Radix UI AlertDialog desactiva esto por disenio.

<dialog> + showModal() provee focus trap, Escape, semantica aria-modal, renderizado en top-layer y ::backdrop de forma nativa. Elimina la necesidad de librerias JS y evita los tres bugs mas comunes: z-index, overflow:hidden y transforms ancestros.

Un segundo modal sobre uno activo crea focus traps anidados, ambiguedad en Escape, y confusion de scrim. Apple HIG y Nielsen Norman Group lo prohiben explicitamente. Si se necesita un sub-paso, reemplaza el contenido del mismo dialog en su lugar con indicador de progreso.