Un diálogo que se porta bien en HTML

El diálogo nativo te da la trampa de foco, el fondo y Escape para cerrar.

<button type="button" id="open-prefs">Preferences</button>

<dialog id="prefs" aria-labelledby="prefs-title">
  <h2 id="prefs-title">Preferences</h2>
  <form method="dialog">
    <label for="theme">Theme</label>
    <select id="theme" name="theme">
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
    <button value="cancel">Cancel</button>
    <button value="save">Save</button>
  </form>
</dialog>

<script>
  const prefs = document.getElementById('prefs');
  document.getElementById('open-prefs')
    .addEventListener('click', () => prefs.showModal());
  prefs.addEventListener('close', () => {
    console.log('closed with', prefs.returnValue);
  });
</script>

Cómo funciona

1. showModal() vuelve inerte el resto de la página y atrapa el foco adentro.
2. aria-labelledby nombra el diálogo desde su propio encabezado.
3. Un formulario con method="dialog" lo cierra y reporta qué botón se usó.

Palabras clave y builtins usados aquí

• const
• document

El intento, en números

Líneas

23

Caracteres a escribir

660

Tokens

178

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 142 segundos.

Escribe este fragmento

Paso 4 de 4 en Foco y visibilidad; paso 12 de 15 en HTML accesible.

← Anterior Siguiente →