Patrones accesibles reutilizables
Cada patrón usa los componentes compartidos reales de src/components/: recórralos con Tab, provoque errores y abra el diálogo.
Error de campo y confirmación del formulario
Campo obligatorio con un error en línea asociado mediante programación (role="alert", aria-invalid, aria-describedby) y una confirmación de envío (role="status").
Solo lo usamos para enviar la propuesta solicitada.
Acciones desactivadas y en carga
Un botón en carga comunica aria-busy y un estado para lectores de pantalla; una acción desactivada usa disabled + aria-disabled con un motivo visible.
Estado vacío
Todavía no hay localizaciones guardadas
Explore la biblioteca y guarde una localización para verla aquí. Los estados vacíos explican el próximo paso.
Foco del teclado
Recorra estos controles con Tab; cada uno muestra un anillo dorado de foco de 2 px. El enlace al principio de la página salta al contenido principal.
Etiqueta para lector de pantalla
Los controles que solo tienen iconos incluyen aria-label; el glifo usa aria-hidden.
Contención de foco en un diálogo
Al abrir, el foco se mueve al diálogo, Tab queda contenido, Escape o el fondo lo cierran y el foco vuelve al activador.