Sistema de Superposición y Diálogos

¿Qué hace Sistema de Superposición y Diálogos?

Propósito

La habilidad Sistema de Superposición y Diálogos proporciona una metodología para gestionar capas de contenido temporales que se sitúan sobre la interfaz principal. Garantiza que las interrupciones sean proporcionales a la tarea del usuario, que el contexto se preserve cuando sea posible y que la interfaz siga siendo accesible y responsiva al usar Modales, Paneles o Popovers.

Casos de Uso

• Diseñar un flujo de confirmación para una acción destructiva (Modal).
• Crear un espacio de trabajo secundario para editar detalles complejos sin perder el contexto de la página (Panel).
• Implementar ayuda contextual o tooltips para elementos de IU específicos (Popover).
• Diseñar una capa de descubrimiento para filtros o búsqueda específica para móviles (Panel).

Cuándo NO Usarlo

• Navegación Principal: No uses superposiciones para la estructura principal del sitio; usa site-navigation-system en su lugar.
• Contenido Persistente: Si la información es crítica para que el usuario la vea en todo momento, debe ser parte del diseño base de la página, no una superposición.
• Flujos Complejos de Varias Páginas: Si una tarea requiere más de 2-3 pasos, considera una página dedicada en lugar de un modal para evitar la desorientación del usuario.
• Notificaciones Toast/Snackbar: Para comentarios de estado pasivos y no bloqueantes (por ejemplo, "Guardado", "Copiado al portapapeles"), usa toast-and-snackbar-system en su lugar; cubre el posicionamiento, apilamiento, duración y accesibilidad para esa capa en profundidad.

Entradas

1. Volumen de Contenido: ¿Cuánta información necesita mostrarse?
2. Nivel de Interrupción: ¿El usuario debe terminar esta tarea antes de continuar, o es opcional?
3. Contexto de Activación: ¿De dónde viene el usuario y qué espera que suceda?
4. Plataforma/Ventana Gráfica: ¿Es para móvil, escritorio o un híbrido responsivo?

Salidas

1. Selección de Patrón: Una elección clara entre Modal, Panel o Popover basada en la matriz de interrupción.
2. Especificación de Anatomía: Regiones definidas (Encabezado, Contenido, Pie/Acciones) y su jerarquía interna.
3. Especificación de Comportamiento: Reglas para el comportamiento del fondo, desencadenantes de cierre y adaptación responsiva.
4. Requisitos de Accesibilidad: Gestión del foco y definiciones de roles ARIA.

Flujo de Trabajo

1. Categorizar por Nivel de Interrupción

Determina la "gravedad" requerida de la superposición:

• Nivel 1 (Alto): Modal. Deshabilita el fondo. Úsalo para decisiones críticas o tareas enfocadas.
• Nivel 2 (Medio): Panel. Se desliza desde el borde. Úsalo para subtareas complejas que se beneficien de ver el contexto padre.
• Nivel 3 (Bajo): Popover. Anclado a un elemento específico. Úsalo para configuraciones o información contextual.

Para comentarios de estado pasivos y no bloqueantes (Nivel 4), consulta toast-and-snackbar-system; está fuera del alcance aquí.

2. Definir la Jerarquía Interna (Anatomía)

Aplica visual-hierarchy-system a la superposición:

• Encabezado: Título claro y un mecanismo de "Cerrar" consistente (botón X).
• Cuerpo: El área de contenido principal. Si el contenido es largo, define el comportamiento de desplazamiento (encabezado/pie fijo).
• Pie: Acciones primarias y secundarias, alineadas de manera consistente (generalmente alineadas a la derecha en escritorio, ancho completo en móvil).

3. Establecer Elevación y Fondo

• Estrategia de Z-Index: Asegúrate de que las superposiciones estén en el contexto de apilamiento correcto. Prefiere el elemento nativo <dialog> para Modales: gestiona su propia capa superior, proporciona el pseudoelemento ::backdrop para la cortina y maneja el cierre con Escape de forma nativa.
• Fondo (Cortina): Úsalo para Modales y Paneles para atenuar el fondo y enfocar la atención. Define si hacer clic en el fondo cierra la superposición. Con <dialog>, estiliza la cortina a través de ::backdrop en lugar de un <div> superpuesto renderizado manualmente.
• Inercia del Fondo: Cuando una superposición está abierta, el resto de la página debe ser no interactivo y estar oculto para la tecnología de asistencia. <dialog>.showModal() hace esto automáticamente; para superposiciones personalizadas (no <dialog>), aplica el atributo inert al contenido de fondo en lugar de depender solo de aria-hidden.
• Sombras: Usa profundidad para indicar la posición de la superposición sobre la capa base.

4. Diseñar para la Adaptación Responsiva

Las superposiciones deben transformarse según el tamaño de pantalla:

• Popover de Escritorio -> Panel en Móvil: Los menús contextuales pequeños a menudo se convierten en paneles alineados en la parte inferior en móvil para un mejor alcance del pulgar.
• Modal de Escritorio -> Pantalla Completa en Móvil: Los modales grandes deben ocupar toda la ventana gráfica en pantallas pequeñas para maximizar el espacio.
• Comportamiento del Panel: Asegúrate de que los paneles no superen el 90% del ancho de la ventana gráfica en móvil.

5. Definir Patrones de Cierre y Salida

• Proporciona al menos tres formas de salir de una superposición no crítica: botón "Cerrar", tecla Escape y clic en el fondo.
• Para modales críticos (de alerta), requiere una acción explícita (por ejemplo, "Cancelar" o "Confirmar").

Reglas de Decisión

• La Regla "Modal vs. Panel": Si el usuario necesita consultar el contenido de fondo mientras trabaja, usa un Panel. Si la tarea es un momento de "parar y arreglar", usa un Modal.
• La Regla del "Pulgar": En móvil, prioriza los Paneles Inferiores para las acciones, manteniéndolos dentro del alcance natural del pulgar.
• La Regla de los "Dos Pasos": Si una superposición requiere más de dos "vistas" o pasos internos, probablemente pertenece a su propia página.
• Lógica del Fondo: Solo permite "Clic fuera para cerrar" en superposiciones no destructivas. Nunca en formularios donde se puedan perder datos.

Restricciones

• Accesibilidad: Debe ser navegable por teclado. Los Modales deben atrapar el foco (el elemento nativo <dialog> lo hace por defecto cuando se abre mediante showModal()). El contenido de fondo debe hacerse inert (o equivalente) para que el foco del lector de pantalla y del teclado no pueda escapar hacia él. Usa role="dialog" o role="alertdialog" con aria-modal="true" y aria-labelledby apuntando al título cuando no se use el elemento nativo.
• Responsividad: Las superposiciones nunca deben causar desplazamiento horizontal. El contenido interno debe ser responsivo.
• Jerarquía: El H1/Título de la superposición debe ser el elemento más prominente dentro del contenedor.

Patrones Comunes de Fracaso

• Sopa de Superposiciones: Apilar múltiples modales uno encima del otro.
• Pérdida de Contexto: Usar un modal que cubre exactamente la información que el usuario necesita para completar la tarea.
• El "Cierre Invisible": Ocultar el botón de cierre o hacerlo demasiado pequeño para la interacción táctil (mínimo 44x44px).
• Conflictos de Desplazamiento: Permitir que la página de fondo se desplace mientras una superposición está abierta (lleva a la desorientación).
• Acciones Inconsistentes: Intercambiar la posición de los botones "Cancelar" y "Confirmar" en diferentes superposiciones.

Criterios de Validación

• El patrón elegido (Modal/Panel/Popover) coincide con el nivel de interrupción de la tarea.
• La jerarquía interna es clara con un Título y una Acción Primaria distintivos.
• La adaptación responsiva (por ejemplo, Popover a Panel) está definida para móvil.
• La lógica de "Clic fuera para cerrar" es apropiada para el riesgo de datos.
• La gestión del foco y los requisitos de accesibilidad del teclado están especificados.
• La elevación (sombras/fondos) distingue la capa de la página base.
• El contenido de fondo se hace inert (o se usa el elemento nativo <dialog>) siempre que un Modal o Panel esté abierto.