Chat

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-chat docs-position-static">
<button class="ally-btn ally-chat-toggle" type="button" data-ally-chat-toggle>Abrir chat</button>
<section class="ally-chat-panel" data-ally-chat-panel hidden aria-label="Asistente Ally">
<div class="stack-r ally-justify-between">
<strong>Asistente Ally</strong>
<button class="ally-btn ally-btn-small" type="button" data-ally-chat-close>Cerrar</button>
</div>
<div class="ally-chat-log" data-ally-chat-log>
<div class="ally-chat-message">Hola, ¿en qué puedo ayudarte?</div>
</div>
<form class="stack-r">
<label class="ally-visually-hidden" for="chat-message-demo">Mensaje</label>
<input class="ally-input ally-grow" id="chat-message-demo" type="text">
<button class="ally-btn ally-btn-primary" type="submit">Enviar</button>
</form>
</section>
</div>

Contrato accesible

Propósito

Presenta conversación con historial role log y control abrir/cerrar.

Clases CSS

.ally-chat y modificadores de estado documentados.

HTML

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

ARIA

role="log", aria-live controlada y botón con estado expandido.

Teclado

Tab recorre controles; Escape cierra; mensajes se anuncian de forma controlada.

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