Feedback

Spinner

Indica carga con texto accesible.

.ally-spinnerMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

Cargando resultados…

<div class="ally-spinner" role="status">
<span>Cargando resultados…</span>
</div>

Propósito: Indica carga con texto accesible.
Clases CSS: .ally-spinner y modificadores de estado documentados.
HTML: Elemento semántico correspondiente, heading o nombre accesible y controles nativos.
ARIA: role="status" y texto de carga.
Teclado: Tab sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.
Foco: No mueve el foco automáticamente salvo que la corrección requiera acción inmediata.
Estados: info, success, warning, error, loading y dismissed.
Ally Debug: Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

defaultfocusactivedisablederror

Los estados visibles deben acompañarse de texto, atributos nativos o propiedades ARIA; nunca dependen solo del color.

Prueba obligatoria: semántica, teclado, foco visible, zoom al 200%, contraste, reduced motion y lector de pantalla.

<div class="ally-spinner">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>

Un contenedor genérico con una clase visual no reemplaza la semántica, el nombre accesible ni la gestión de estados.