Modal

Ejemplo

Vista real construida con los archivos compilados de Ally.

<button class="ally-btn ally-btn-primary" type="button" data-ally-modal-open="page-modal-modal">Abrir modal</button>
<div class="ally-modal" id="page-modal-modal" aria-labelledby="page-modal-modal-title" hidden role="dialog" aria-modal="true">
<div class="ally-modal-dialog">
<h2 id="page-modal-modal-title">Configuración guardada</h2>
<p>El foco queda atrapado y vuelve al disparador al cerrar.</p>
<div class="stack-r">
<button class="ally-btn ally-btn-primary" type="button" data-ally-modal-close>Aceptar</button>
<button class="ally-btn" type="button" data-ally-modal-close>Cancelar</button>
</div>
</div>
</div>

Contrato accesible

Propósito

Presenta un diálogo con foco atrapado, Escape y retorno de foco.

Clases CSS

.ally-modal y modificadores de estado documentados.

HTML

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

ARIA

role="dialog", aria-modal y nombre mediante aria-labelledby.

Teclado

Tab y Shift+Tab permanecen en el diálogo; Escape cierra.

Foco

Foco visible y predecible; overlays devuelven el foco al control que los abrió.

Estados

closed, open, active, selected, expanded, disabled y loading según aplique.

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-modal">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>