Diálogo

El elemento del diálogo es útil para representar cualquier tipo de diálogo en HTML, descubre cómo funciona.

Un diálogo modal es un tipo especial de cuadro emergente en una página web: una ventana emergente que interrumpe al usuario para que se enfoque en sí mismo. Existen algunos casos de uso válidos para abrir un diálogo, pero hay mucha consideración debe realizarse antes de hacerlo. Los diálogos modales obligan a los usuarios a centrarse en contenido específico y, al menos temporalmente, a ignorar el resto de la página.

Los diálogos pueden ser modales (solo se puede interactuar con su contenido) o no modales (es posible interactuar de todos modos con contenido fuera del diálogo). Los diálogos modales se muestran sobre el resto del contenido de la página. El resto de la página es inerte y, de forma predeterminada, está oculto por un fondo semitransparente.

El elemento de HTML semántico <dialog> para crear un diálogo incluye semántica, interacciones del teclado y todas las propiedades y métodos de la interfaz HTMLDialogElement.

Diálogos modales

Este es un ejemplo de una <dialog> modal. Abre el diálogo con el botón “Abrir diálogo modal”. Una vez abierto, hay tres maneras de cerrar el diálogo: la tecla Escape, enviar un formulario con un botón que tenga configurado formmethod="dialog" (o si el formulario tiene configurado method="dialog") y el método HTMLDialogElement.close().

HTMLDialogElement tiene tres métodos principales, junto con todos los métodos heredados de HTMLElement.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

Porque este <dialog> se abrió mediante HTMLDialogElement.showModal() es un diálogo modal. Cuando abres un diálogo modal, se desactiva y se oculta todo, excepto el diálogo en sí. Si Coloca el cursor sobre la IU fuera del diálogo, verás que todos los elementos se comportan como si pointer-events: none; se estableció; incluso el botón que abre el diálogo no reaccione a las interacciones.

Cuando se abre el diálogo, el enfoque se mueve al diálogo. El enfoque se establece en el primer elemento del orden de navegación secuencial del teclado dentro de ese diálogo. Si presionas la tecla tab de forma repetida, notarás que solo el contenido dentro del cuadro de diálogo se puede enfocar mientras el cuadro de diálogo modal se abiertos. Todo lo que está fuera del diálogo modal es inerte mientras el diálogo esté abierto.

Cuando se cierra un diálogo, ya sea modal o no, se devuelve el foco al elemento que lo abrió. Si, de manera programática, abrir un diálogo no basado en la acción del usuario, reconsiderar Si es necesario, asegúrate de que el enfoque se restablezca donde estaba antes de que se abriera el diálogo, especialmente si el usuario descarta el diálogo sin interactuar con él.

Existe un atributo inert global que se puede usar para inhabilitar un elemento y todos sus elementos subordinados, excepto cualquier elemento activo . Cuando se abre un diálogo modal con showModal(), la inercia o la desactivación se incluyen de forma gratuita; el atributo no se establece de forma explícita.

El fondo que oculta todo excepto el diálogo se puede diseñar con el pseudoelemento ::backdrop. El fondo solo se muestra cuando se muestra una <dialog> con el método .showModal(). Este pseudoelemento coincide con todos los fondos, incluido el que se muestra cuando se usa la API de Fullscreen, como cuando se ve un video en modo de pantalla completa que no tiene la misma relación de aspecto que la pantalla o el monitor.

Diálogos no modales

De manera similar, HTMLDialogElement.show() abre un diálogo, pero sin agregar un fondo ni hacer que nada se vuelva inerte. La tecla Escape no cierra los diálogos no modales. Debido a esto, es aun más importante asegurarse de incluir un método para cerrar el diálogo no modal. Al hacerlo, si el elemento de cierre está fuera del diálogo, ten en cuenta que el enfoque se dirigirá al elemento que abrió el diálogo, lo que podría no ser la mejor experiencia del usuario.

Si bien la especificación no requiere oficialmente un botón para cerrar el diálogo, considéralo como obligatorio. La tecla escape se cerrará un diálogo modal, pero no uno no modal. Un botón visible que puede recibir enfoque mejora la accesibilidad y la experiencia del usuario.

Cómo cerrar un diálogo

No necesitas el método HTMLDialogElement.close() para cerrar un diálogo. No necesitas JavaScript. Cómo cerrar <dialog> sin JavaScript, incluye un formulario con un método de diálogo configurando method="dialog" en <form> o formmethod="dialog". del botón.

Cuando un usuario envía datos a través del método dialog, se mantiene el estado de los datos que ingresó. Si bien hay un evento de envío, el El formulario pasa por la validación de restricciones (a menos que se configure novalidate): los datos del usuario no se borran ni se envían. Un botón de cierre sin JavaScript se puede escribir de la siguiente manera:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Es posible que hayas notado el atributo autofocus configurado en el <button> de cierre en este ejemplo. No se recibirán los elementos con el atributo autofocus establecido en un <dialog> Enfocarse en la carga de la página (a menos que la página se cargue con el diálogo visible) Sin embargo, se enfocarán cuando se abra el diálogo.

De forma predeterminada, cuando se abra un diálogo, el primer elemento enfocable dentro del diálogo recibirá el foco, a menos que se elemento en el diálogo tiene configurado el atributo autofocus. Configurar el atributo autofocus en el botón de cierre garantiza que reciba el enfoque cuando se abra el diálogo. Sin embargo, incluir autofocus en un <dialog> solo debe hacerse con mucha consideración. Se omiten todos los elementos de la secuencia que aparecen antes del elemento enfocado automáticamente. Analizaremos este atributo con más detalle en la lección de enfoque.

La interfaz HTMLDialogElement incluye una propiedad returnValue. Cuando envías un formulario con method="dialog", se configura returnValue como name, si corresponde, del botón de envío que se usa para lo siguiente: envía el formulario. Si hubiéramos escrito <button type="submit" name="toasty">close</button>, el returnValue sería toasty.

Cuando se abre un diálogo, el atributo booleano open está presente, lo que significa que el diálogo está activo y se puede interactuar con él. Cuando se abre un diálogo agregando el atributo open en lugar de hacerlo a través de .show() o .showModal(), el diálogo no será modal. La propiedad HTMLDialogElement.open muestra true o false, según si el diálogo está disponible para la interacción, no si es modal o no.

Si bien JavaScript es el método preferido para abrir un diálogo, incluido el atributo open cuando se carga la página y, luego, quitarlo con .close(), puede ayudar a garantizar que el diálogo esté disponible incluso cuando JavaScript no lo esté.

Detalles adicionales

No usar tabindex

El elemento que se activa para abrir el diálogo y el botón de cierre que contiene (y posiblemente otro contenido) pueden recibir enfoque y son interactivos. El elemento <dialog> no es interactivo y no recibe enfoque. No agregues la propiedad tabindex. al diálogo en sí.

Roles de ARIA

El rol implícito es dialog. Si el diálogo es una ventana de confirmación que comunica un mensaje importante que requiere una confirmación o alguna otra respuesta del usuario, establece role="alertdialog". El diálogo también debe tener un nombre accesible. Si el texto visible puede proporcionar el nombre de accesibilidad, agrega aria-labelledby="idOfLabelingText".

Configuración predeterminada de CSS

Ten en cuenta que los navegadores proporcionan un estilo predeterminado para dialog. Firefox, Chrome y Edge establecieron color: CanvasText; en background-color: Canvas; y Safari configura color: black; background-color: white; en sus hojas de estilo usuario-agente. El color se hereda de dialog y no de body o :root, lo que puede ser inesperado. La propiedad background-color no se hereda.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el elemento de diálogo.