Calendario

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-calendar" aria-label="Calendario de agosto">
<div class="stack-r ally-justify-between ally-align-center">
<button class="ally-btn ally-btn-small" type="button" data-ally-calendar-prev>Anterior</button>
<h3 data-ally-calendar-label aria-live="polite">Agosto 2026</h3>
<button class="ally-btn ally-btn-small" type="button" data-ally-calendar-next>Siguiente</button>
</div>
<div data-ally-calendar-grid>
</div>
</div>

Contrato accesible

Propósito

Presenta una grilla de fechas navegable con teclado.

Clases CSS

.ally-calendar y modificadores de estado documentados.

HTML

Elemento semántico correspondiente, heading o nombre accesible y controles nativos.

ARIA

Grid de fechas con nombres completos y estado seleccionado.

Teclado

Flechas navegan fechas; Enter selecciona; Home/End según patrón.

Foco

Mantiene foco estable durante actualizaciones y navegación.

Estados

empty, loading, selected, current, complete y error.

Ally Debug

Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

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

Accesibilidad

No hacer

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