Alert Dialog Nuevo

Variante especializada de Dialog para situaciones que requieren confirmación o alerta urgente del usuario. Usa role="alertdialog" y bloquea tanto Escape como click en backdrop para forzar una acción explícita. Implementa el patrón WAI-ARIA Alert Dialog.

Demostración

Sin estilos (solo base.css)

Así se ve hp-dialog con data-alert usando únicamente @headless-primitives/utils/base.css. El focus trap, bloqueo de ESC y backdrop sin cierre funcionan completamente.

¿Confirmar acción irreversible?

Con estilos personalizados

Confirmar eliminación

¿Estás seguro de que deseas eliminar este elemento? Esta acción no se puede deshacer.

index.html

<hp-dialog
  id="alert-dialog"
  data-alert="true"
  aria-labelledby="alert-title"
  aria-describedby="alert-body"
>
  <hp-dialog-backdrop class="backdrop"></hp-dialog-backdrop>
  <hp-dialog-content class="dialog-content" role="alertdialog" aria-modal="true">
    <h2 id="alert-title">Confirmar eliminación</h2>
    <p id="alert-body">¿Estás seguro? Esta acción no se puede deshacer.</p>
    <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem;">
      <button id="cancel-alert">Cancelar</button>
      <button id="confirm-alert" class="danger">Eliminar</button>
    </div>
  </hp-dialog-content>
</hp-dialog>

<button id="open-alert">Mostrar Alert Dialog</button>

<script>
  const dialog = document.getElementById("alert-dialog");
  document.getElementById("open-alert").addEventListener("click", () => dialog.open());
  document.getElementById("cancel-alert").addEventListener("click", () => dialog.close());
  document.getElementById("confirm-alert").addEventListener("click", () => {
    console.log("Confirmado");
    dialog.close();
  });
</script>

style.css

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 400px;
  width: 90%;
}

.danger {
  background: #dc2626;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Instalación

AlertDialog reutiliza hp-dialog. Asegúrate de tener instalado:

pnpm

pnpm add @headless-primitives/dialog

npm

npm install @headless-primitives/dialog

yarn

yarn add @headless-primitives/dialog

bun

bun add @headless-primitives/dialog

Features

• ♿️ role="alertdialog" con aria-modal, aria-labelledby y aria-describedby.
• 🔒 ESC NO cierra el dialog — requiere acción explícita del usuario.
• 🖱️ Click en backdrop NO cierra el dialog.
• ⌨️ Focus trap automático dentro del dialog.
• 🎨 Sin estilos visuales (Headless) — reutiliza hp-dialog con data-alert.

Anatomía

<hp-dialog data-alert>
  <hp-dialog-backdrop></hp-dialog-backdrop>
  <hp-dialog-content>
    <!-- Título y descripción con aria-labelledby / aria-describedby -->
    <!-- Botones de acción (sin hp-dialog-close para forzar decisión) -->
  </hp-dialog-content>
</hp-dialog>

API Reference

Alert Dialog reutiliza la API completa de hp-dialog con las siguientes diferencias semánticas:

hp-dialog (con data-alert)

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
data-alert	boolean	false	Activa modo alertdialog: ESC no cierra, backdrop no cierra.

Métodos

Método	Descripción
open()	Abre el alert dialog.
close()	Cierra el alert dialog.

Eventos

Evento	Detalle	Descripción
hp-open	—	Se emite cuando el dialog se abre.
hp-close	—	Se emite cuando el dialog se cierra.

Atributos ARIA clave

• role="alertdialog" — En el hp-dialog-content.
• aria-modal="true" — Siempre presente.
• aria-labelledby — Debe apuntar al ID del título.
• aria-describedby — Debe apuntar al ID de la descripción.

Accesibilidad

Adhiere al patrón WAI-ARIA APG para Alert Dialog.

Navegación por teclado

Tecla	Acción
Escape	NO cierra el alert dialog (requiere acción explícita).
Tab	Navega entre elementos focusables dentro del dialog (focus trap).
Shift + Tab	Navega en reversa dentro del focus trap.
Enter / Space	Activa los botones de acción.

Ejemplos

Confirmación de Eliminación

<button id="delete-btn">Delete Item</button>

<hp-dialog id="delete-dialog" data-alert="true">
  <hp-dialog-backdrop></hp-dialog-backdrop>
  <hp-dialog-content role="alertdialog" aria-labelledby="delete-title">
    <h2 id="delete-title">Delete this item?</h2>
    <p>This cannot be undone.</p>
    <button id="do-delete">Delete</button>
    <button id="cancel-delete">Cancel</button>
  </hp-dialog-content>
</hp-dialog>

<script>
  const dialog = document.getElementById("delete-dialog");
  document.getElementById("delete-btn").addEventListener("click", () => dialog.open());
  document.getElementById("do-delete").addEventListener("click", () => {
    console.log("Item deleted");
    dialog.close();
  });
  document.getElementById("cancel-delete").addEventListener("click", () => dialog.close());
</script>