Sistema de Toast y Snackbar

¿Qué hace Sistema de Toast y Snackbar?

Propósito

El Sistema de Toast y Snackbar proporciona una metodología para diseñar capas de notificación temporales y no disruptivas. Son componentes de UI breves, que se descartan automática o manualmente, y se sitúan en una capa de pantalla dedicada sobre la interfaz principal. A diferencia de las superposiciones modales, no secuestran el foco ni detienen el flujo del usuario; en cambio, sirven como un "bucle de reconocimiento" pasivo de alta visibilidad que confirma que una tarea en segundo plano o inmediata ha tenido éxito, ha fallado o requiere atención menor. Este sistema garantiza que los toasts estén visualmente unificados, posicionados para no bloquear controles vitales y sean completamente accesibles para usuarios de ratón, táctil y tecnologías de asistencia.

Casos de Uso

• Acciones Asíncronas: Confirmar que un archivo se ha subido, un borrador se ha guardado o un registro se ha eliminado en segundo plano.
• Confirmación de Micro-Compromisos: Reconocer acciones como añadir un producto al carrito, copiar un enlace al portapapeles o alternar una preferencia local del sistema.
• Operaciones Destructivas Reversibles: Notificar al usuario que un elemento fue archivado o eliminado, acompañado de una acción "Deshacer" inmediata dentro del snackbar.
• Actualizaciones de Estado Transitorio: Mostrar alertas breves y automatizadas del sistema, como la transición a un estado "Sin conexión" o "En línea".

Cuándo NO Usar

• Bloqueos del Sistema de Alta Gravedad: Si un error crítico requiere intervención inmediata o bloquea al usuario (ej. sesión caducada, fallo de pago); usar sistema-de-superposicion-y-dialogo (Modal).
• Avisos de Sección Persistentes: Si un aviso o error se relaciona específicamente con una sección, página o contexto de formulario completo y necesita permanecer visible hasta resolverse; usar sistema-de-banner-y-alerta (Alerta En Línea).
• Mensajes de Validación de Formularios: Si el usuario comete un error en un campo de entrada específico; usar sistema-de-diseno-de-formularios (validación a nivel de campo).
• Descubrimiento de Contenido Principal: Nunca usar toasts para presentar contenido principal, anuncios de marketing u opciones de navegación.

Entradas

1. Gravedad / Tipo de Mensaje: Éxito (confirmación), Información (actualizaciones neutrales), Advertencia (preocupación no bloqueante) o Error (fallo de operación).
2. Requisitos de Acción: ¿La retroalimentación es pasiva (solo lectura) o incluye una micro-acción única (ej. "Deshacer", "Ver", "Reintentar")?
3. Espacio en Pantalla y Clase de Dispositivo: Viewports objetivo (escritorio, tableta, móvil) y métodos de entrada predominantes (hover de ratón vs. alcance del pulgar).
4. Estrategia de Z-Index y Capas: Reglas de contexto de apilamiento para evitar superponer la navegación del encabezado, pies de página fijos o superposiciones activas.

Salidas

1. Especificación de Anatomía: Plano basado en cuadrícula del contenedor, ranura de icono, cadena de mensaje, CTA de acción y botón de cierre manual.
2. Reglas de Alineación Espacial y Colocación: Coordenadas adaptativas para escritorio (ej. pila superior derecha o inferior derecha) y móvil (ej. deslizamiento hacia arriba de ancho completo en la parte inferior).
3. Lógica de Cola y Apilamiento: Reglas del sistema para manejar alertas simultáneas, límites máximos visibles y secuenciación de caducidad.
4. Cronograma Interactivo y Especificación de Caducidad: Reglas que rigen los tiempos de autodescarte, comportamientos de pausa al pasar el ratón y gestos de deslizamiento.
5. Plano de Accesibilidad / ARIA: Mapeo semántico de regiones activas, manejo del foco para toasts interactivos y anuncios del lector de pantalla.

Flujo de Trabajo

1. Estructurar la Anatomía del Componente

Definir una cuadrícula de espaciado y diseño precisa para el contenedor del toast utilizando fichas espaciales estándar:

• Ranura de Icono: Ancho fijo (ej. 20px o 24px) colocado en el extremo izquierdo. Usar iconos de estado semánticos y de alto contraste (marca de verificación para Éxito, triángulo de exclamación para Advertencia/Error, círculo de información para Información).
• Área de Texto: Tipografía alineada a la izquierda y que se ajusta, que consiste en un título breve (negrita, opcional) y una descripción. Nunca truncar el texto con puntos suspensivos; ajustarlo hasta un máximo de 3 líneas.
• Ranura de Acción (Opcional): Un único botón de texto muy visible (ej. "Deshacer") colocado a la derecha del mensaje. Para texto largo en móvil, ajustar la acción a una nueva línea alineada a la derecha.
• Disparador de Descartar: Un botón de cierre 'X' claro colocado en el extremo derecho. Debe tener un área de impacto mínima de 24x24px (44x44px preferido para objetivos táctiles).

2. Determinar la Colocación Espacial por Viewport

• Colocación en Escritorio: Posicionar la pila de contenedores de toast en la esquina Superior Derecha o Inferior Derecha de la pantalla. Mantener un desplazamiento constante de 24px desde los bordes del viewport.
  • Pila Superior Derecha: Mejor cuando el flujo de acciones principales ocurre en las partes inferiores de la página.
  • Pila Inferior Derecha: Mejor cuando la navegación montada en la parte superior o las barras de utilidades ocupan el margen superior, evitando superposiciones.
• Colocación en Móvil: Transformar la pila de escritorio en una Snackbar anclada en la parte inferior y de ancho completo (márgenes de 12px a 16px desde los bordes izquierdo, derecho e inferior). Esto mantiene la interacción dentro de la "zona de alcance del pulgar" óptima.
• Regla de Z-Index: Asignar siempre un token de z-index dedicado (ej. z-index: 5000 o superior) que coloque los toasts por encima de los encabezados fijos estándar (z-index: 1000) pero por debajo de las superposiciones activas de pantalla completa (z-index: 10000).

3. Establecer la Lógica de Apilamiento y Cola

Gestionar entornos de activación de alto volumen sin inducir thrashing de diseño o saturación cognitiva:

• Límite Máximo Visible: Limitar la cola activa a un máximo de 3 toasts visibles apilados verticalmente.
• Dirección de Apilamiento:
  • Si se coloca en la parte superior de la pantalla, los nuevos toasts se deslizan desde arriba, empujando los toasts más antiguos hacia abajo.
  • Si se coloca en la parte inferior de la pantalla, los nuevos toasts se deslizan hacia arriba desde abajo, empujando los toasts más antiguos hacia arriba.
• Búfer de Cola: Si se activa un 4º toast mientras 3 están activos, almacenar en búfer el nuevo toast en memoria. Renderizarlo inmediatamente cuando el toast visible más antiguo expire naturalmente y se desvanezca.

4. Programar la Caducidad y el Cronograma de Pausa al Pasar el Ratón

Los toasts deben existir el tiempo suficiente para leerse pero disolverse rápidamente para despejar la pantalla:

• Tiempo de Vida Dinámico (TTL): Calcular la caducidad según la longitud del contenido:
  • Toasts Pasivos Cortos (< 40 caracteres): Descartar después de 5 segundos.
  • Toasts Más Largos o con Acción: Descartar después de 7 a 10 segundos para garantizar que los lectores de pantalla puedan anunciarlos completamente y los usuarios tengan tiempo de leer y actuar.
  • Toasts de Error/Fallo: No descartar automáticamente. Mantenerlos visibles hasta que el usuario haga clic manualmente en el botón 'X', asegurando que la retroalimentación crítica no se pierda.
• La Interacción "Pausa al Pasar el Ratón":
  • Si un usuario de ratón se desplaza sobre cualquier parte de la cola de toasts, congelar todas las cuentas regresivas TTL activas. Reiniciar y reanudar los temporizadores solo después de que el ratón salga de los límites del toast.
  • Si un usuario de teclado enfoca cualquier elemento dentro de un toast, congelar el temporizador indefinidamente. Reanudar las cuentas regresivas solo cuando el foco se desplace de vuelta al documento principal.

5. Definir los Comportamientos de Cierre y Gestos

• Deslizamiento Táctil: En dispositivos móviles, permitir a los usuarios descartar snackbars individuales inmediatamente deslizándolos horizontalmente fuera de la pantalla (izquierda o derecha). Mantener el umbral de arrastre al 30% del ancho del viewport.
• Animación: Usar transiciones suaves aceleradas por hardware (ej. transform y opacity) con una duración de 200ms a 300ms y cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo) para la entrada, y un desvanecimiento simple de opacity para la salida.

---

Reglas de Decisión

Matriz de Alineación de Apilamiento

Viewport	Diseño de Navegación Principal	Colocación de Toast Recomendada	Dirección de Animación
Escritorio	Barra Lateral / Dashboard Izquierdo	Inferior Derecha (mantiene el trabajo principal despejado)	Deslizar desde fuera de pantalla a la izquierda
Escritorio	Encabezado Superior Fijo	Inferior Derecha (evita oclusión de navegación)	Deslizar a la izquierda o arriba
Escritorio	Minimalista / Énfasis en Pie de Página	Superior Derecha	Deslizar a la izquierda o abajo
Móvil	Cualquiera	Centrado Inferior / Ancho Completo	Deslizar hacia arriba desde el borde inferior

Matriz de Lógica de Caducidad

Gravedad / Tipo de Toast	¿Contiene Botón de Acción?	Caducidad Recomendada	Tipo de Descartado
Éxito / Información	No	5 segundos (Fijo)	Autodescartar + Cierre manual
Éxito / Información	Sí ("Deshacer" / "Ver")	8 - 10 segundos	Autodescartar + Cierre manual
Advertencia	No	7 segundos	Autodescartar + Cierre manual
Error / Fallo	Sí o No	Infinito (Permanece persistente)	Cierre manual SOLAMENTE

---

Restricciones

• Accesibilidad (Cumplimiento WCAG 2.2):
  • Regiones Vivas ARIA: Mapear toasts pasivos a role="status" (que por defecto tiene aria-live="polite" y aria-atomic="true"). Evitar usar role="alert" (assertivo) a menos que se comunique un fallo del sistema (ej. "Conexión a Internet perdida"), ya que las alertas assertivas interrumpen inmediatamente a los lectores de pantalla a mitad de una frase.
  • Navegación por Teclado (WCAG 2.2 SC 2.1.1): Cuando un toast contiene una acción interactiva (ej. "Deshacer" o "Ver"), debe ser accesible por teclado. Dado que los bucles de tabulación del teclado pueden ser lentos, proporcionar un atajo global de bypass (ej. Escape cierra el toast activo, o F6 desplaza el foco directamente al contenedor de la cola de toasts) o colocar el contenedor del toast justo después del activador activo en el orden de tabulación del DOM.
  • Sin Trampas de Foco: Nunca atrapar el foco del teclado dentro de una cola de toasts. El usuario debe poder salir libremente con Tab del toast y volver al contenido de la página.
• Contraste (WCAG 2.2 SC 1.4.3):
  • Todo el texto, iconos de estado y botones deben cumplir los mínimos de contraste contra el fondo del toast:
    • Texto normal: 4.5:1 de contraste mínimo.
    • Iconos y bordes de controles activos: 3:1 de contraste mínimo.
• Capacidad de Respuesta:
  • En viewports < 600px, el contenedor del toast debe abarcar todo el ancho (width: calc(100% - 32px)) con alineación horizontal centrada para evitar columnas de margen incómodas.

---

Patrones de Fallo Comunes

• La Trampa de la "Acción Ocluida": Colocar la cola de toasts de escritorio directamente sobre elementos interactivos de alta frecuencia, como el botón del carrito de compras en el encabezado o un desplegable de filtrado de tabla, provocando que los usuarios hagan clic incorrecto.
• El Destello "Ahora lo Ves, Ahora No": Auto-descartar un error o advertencia complejo de varias palabras en 2-3 segundos. Esto viola los umbrales básicos de lectura de accesibilidad y causa pánico en los usuarios que perdieron el contexto.
• Silencio del Lector de Pantalla: Añadir toasts dinámicamente al DOM sin un envoltorio de región-viva ARIA, haciéndolos completamente invisibles para usuarios con discapacidad visual.
• Thrashing de Cambio de Diseño: Animar la altura de la cola de toasts abruptamente al entrar, provocando que el contenido principal de la página se mueva hacia arriba y hacia abajo.
• Ignorancia de Caducidad por Hover/Foco: Permitir que un toast se autodescarte mientras un usuario está leyendo un texto denso al pasar el ratón o se desplaza sobre una CTA "Deshacer", causando que hagan clic en "aire muerto" y activen acciones no deseadas.

---

Criterios de Validación

• Los toasts están estilizados con indicadores semánticos de alto contraste distintos (color + icono único).
• En escritorio, los toasts no se superponen a los elementos de navegación principales ni a las zonas de acción global.
• En móvil, los toasts se transforman en componentes anclados en la parte inferior y de ancho completo, fácilmente alcanzables con el pulgar.
• Los temporizadores activos se pausan instantáneamente al pasar el ratón sobre ellos o al enfocarlos por teclado.
• Los toasts con acción permanecen visibles durante un mínimo de 8 a 10 segundos; los toasts de error nunca se autodescartan.
• El marcado de lector de pantalla semántico (role="status" o role="alert") está especificado correctamente.
• Los usuarios de teclado pueden navegar a los botones de acción del toast y activarlos sin barreras de trampa de foco.
• Todos los elementos interactivos (botón de cierre, CTA) cumplen el objetivo táctil mínimo de WCAG 2.2 de 24x24px (44x44px preferido).