Alerts

Los cambios se guardaron correctamente.

La sincronización se ejecutará en segundo plano.

Teclado y foco

  • Tab mueve el foco al botón cerrar de cada alerta visible.
  • Enter o Space en el botón cerrar oculta la alerta (hidden).
  • Las variantes error y warning usan role="alert" (anuncio assertivo); éxito e info usan role="status" (anuncio polite).
  • El foco no se mueve al cerrar; permanece en el botón cerrar hasta que el usuario tabule.

Botones

¿Eliminar este registro?

Estás a punto de eliminar Informe de ventas — Q3 2026. Los datos asociados dejarán de estar disponibles para tu equipo.

Esta acción es permanente y no se puede deshacer. Si solo quieres ocultarlo, considera archivarlo.

Teclado y foco

  • Tab / Shift+Tab navegan entre botones en orden del DOM.
  • Enter o Space activan el botón enfocado (acción nativa de <button>).
  • Hover eleva el botón (translateY + sombra); click lo hunde con sombra interna.
  • El foco visible usa :focus-visible en .c-btn (anillo cian + sombra).
  • «Guardar» transiciona a Guardando… (spinner) y luego a Guardado antes de volver al estado inicial.
  • «Eliminar» abre un modal de confirmación; el foco va a No, conservar para evitar eliminaciones accidentales.
  • El menú hamburguesa agrupa opciones en Acciones y Vista; hover aplica sombra en cada ítem.

Checkboxes/Radios

Filtrar tabla
Vista predeterminada

Teclado y foco

  • Tab entra y sale de cada grupo; dentro del grupo, tabula entre inputs.
  • Space marca/desmarca el checkbox o radio enfocado.
  • En radios del mismo name, las flechas ↑↓ (o ←→) mueven la selección sin salir del grupo (comportamiento nativo del SO/navegador).
  • Hover resalta la fila con sombra; el control muestra borde azul al enfocarse.
  • Estado marcado: checkbox con check blanco; radio con punto central azul.

Dialogs

¿Eliminar este recurso?

Se eliminará Plantilla de onboarding — Equipo comercial y todas sus referencias en proyectos activos.

Esta acción no se puede deshacer.

Teclado y foco

  • Enter o Space en «Eliminar recurso» abre el diálogo con showModal().
  • Escape cierra el diálogo (evento cancel).
  • Mientras está abierto, el foco queda atrapado dentro del modal (comportamiento nativo de <dialog> modal).
  • Tab cicla entre los controles del diálogo sin salir al fondo.
  • Cancelar va primero y recibe el foco inicial para reducir eliminaciones accidentales.
  • Máximo 3 toasts visibles a la vez (los más antiguos se eliminan del DOM).
  • El diálogo entra con animación suave de escala y el backdrop se atenúa progresivamente.

Menús

Teclado y foco

  • Enter o Space en el trigger abre/cierra el menú; aria-expanded alterna entre "true" y "false".
  • ArrowDown con el menú cerrado también lo abre y enfoca el primer ítem.
  • ArrowDown / ArrowUp navegan entre ítems con el menú abierto.
  • Escape cierra el menú y devuelve el foco al trigger.
  • Clic fuera del wrapper cierra el menú sin mover el foco automáticamente.
  • Las opciones están agrupadas por categoría; hover aplica sombra en cada ítem.
  • «Cerrar sesión» usa estilo destructivo (.c-menu__item--danger).
  • El trigger abierto muestra estado activo con borde azul y sombra.

Toasts

Operación exitosa

Registro guardado correctamente.

Teclado y foco

  • Los toasts no son foco-interactivos; no reciben Tab.
  • El contenedor usa aria-live="polite" para anunciarlos sin interrumpir al usuario.
  • Éxito: role="status"; error: role="alert".
  • Desaparecen solos a los 5 s; no bloquean la interacción con el resto de la página.
  • Los botones de demo disparan toasts flotantes en la esquina inferior derecha.
  • Cada toast incluye ícono, título, mensaje y botón cerrar con hover.