Diálogo

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 son muy importantes 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 en la parte superior del resto del contenido de la página. El resto de la página es inerte y, de forma predeterminada, está oscurecida 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. Abrir el diálogo con el mensaje "Abrir diálogo modal" . Una vez abierto, hay tres formas de cerrar el cuadro de diálogo: la clave Escape, enviar un formulario con un botón que tenga el ícono formmethod="dialog" configurado (o si el formulario en sí tiene method="dialog" configurado) 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 foco se mueve hacia él. 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 esté abiertos. Todo fuera del cuadro de diálogo modal estará inerte mientras el cuadro de diálogo esté abierto.

Cuando se cierra un diálogo, ya sea modal o no, el foco se devuelve 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 vuelva a estar donde estaba antes de que se abra el cuadro de diálogo. en especial 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 son gratuitas. el atributo no se establece de forma explícita.

Se puede aplicar estilo al fondo que oculta todo excepto el diálogo con ::backdrop. seudoelemento. El fondo solo se muestra cuando se muestra una <dialog> con el método .showModal(). Este seudoelemento coincida con todos los fondos, incluido el que se muestra cuando se usa la API FullScreen. como cuando se mira un video en pantalla completa que no tiene la misma relación de aspecto que la pantalla o el monitor.

Diálogos no modales

El elemento HTMLDialogElement.show() también abre un diálogo, pero sin agregar un fondo ni provocar que se inerte. La tecla Escape no cierra los diálogos no modales. Debido a esto, es incluso más importante asegurarse de incluir un método para cerrar el diálogo no modal. De esta manera, si cuanto más cerca esté fuera del diálogo, te darás cuenta de que el enfoque irá al elemento. que abrió el diálogo, lo que puede 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>

Quizás hayas notado el atributo autofocus que se establece 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, sí 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 Cerrar garantiza recibe el foco cuando se abre 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 se encuentran antes del elemento de enfoque automático. Analizaremos este atributo con más detalle en la lección principal.

La interfaz HTMLDialogElement incluye un returnValue propiedad. 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 al agregar el atributo open en lugar de que a través de .show() o .showModal(), el diálogo no tendrá modales. La HTMLDialogElement.open La propiedad muestra true o false, dependiendo de 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 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 cuadro de diálogo es una ventana de confirmación que comunica un mensaje importante y que requiere una confirmación, o bien 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. color se hereda desde dialog y no desde body ni :root, 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.