Algunas prácticas con el elemento de diálogo HTML

Este soy yo mirando el dialogelemento HTML por primera vez. Hace tiempo que soy consciente de ello, pero todavía no lo he probado. Tiene algunas características bastante interesantes y atractivas. No puedo decidir por usted si debería usarlo en producción en sus sitios, pero creo que está empezando a ser posible.

No es sólo un elemento semántico, tiene API y CSS especiales.

Llegaremos a eso en un momento, pero es notable porque hace que el soporte del navegador sea significativo.

Cuando obtuvimos por primera vez elementos HTML5 como article, prácticamente no importaba si el navegador los admitía o no, porque nada empeoraba en esos escenarios si los usabas. Podrías hacerlo a nivel de bloque y sería como un div sin sentido que habrías usado de todos modos.

Dicho esto, no lo usaría simplemente dialogcomo un “reemplazo más semántico div“. Tiene demasiadas funciones para eso.

Hagamos lo del soporte del navegador.

Mientras escribo:

• Chrome lo tiene (37+), por lo que Edge está a punto de obtenerlo.
• Firefox tiene los estilos User-Agent ( UA ) implementados (69+), pero la funcionalidad está detrás de una dom.dialog_element.enabledbandera. Incluso con la bandera, no parece que todavía tengamos el material CSS.
• No hay soporte de Safari.

Es polirrellenable .

Ciertamente es más atractivo usar funciones con mejor soporte que esto, pero yo diría que está cerca y podría cruzar la línea si eres del tipo de relleno de todos modos.

Pasemos a las cosas jugosas.

Un diálogo es openo no.

dialog  I'm closed./dialogdialog open  I'm open./dialog

Tienen algo de estilo UA.

Parece coincidir en Chrome y Firefox. La hoja de estilo UA la tiene centrada con márgenes automáticos, líneas negras gruesas y ajustada al contenido.

Como cualquier estilo UA , es casi seguro que los anularás con tus propios estilos de diálogo sofisticados: sombras y tipografía y cualquier otra cosa que coincida con el estilo de tu sitio.

Hay una API de JavaScript para abrirlos y cerrarlos.

Digamos que tiene una referencia al elemento denominado dialog:

dialog.show();dialog.hide();

Probablemente deberías usar este comando más explícito:

dialog.showModal();

Eso es lo que hace que el telón de fondo funcione (y llegaremos a eso pronto). No estoy seguro de haberlo asimilado, pero la especificación habla de una “pila de diálogo pendiente” y esta API abrirá el modal pendiente de esa pila. Aquí hay un modal que puede abrir un segundo modal de apilamiento:

También hay una forma basada en HTML para cerrarlos.

Si coloca un tipo especial de formulario allí, al enviarlo se cerrará el modal.

form method="dialog"  buttonClose/button/form

Tenga en cuenta que si abre el cuadro de diálogo mediante programación, obtendrá una portada de fondo.

Esta siempre ha sido una de las cosas más complicadas a la hora de crear tus propios diálogos. Un patrón de interfaz de usuario común es oscurecer el fondo detrás del diálogo para centrar la atención en el diálogo.

Lo obtenemos gratis con dialog, suponiendo que lo abras mediante JavaScript. Controlas su apariencia con el ::backdroppseudoelemento. En lugar del negro predeterminado de baja opacidad, usemos el rojo con rayas:

Bonificación interesante: puedes usarlo backdrop-filterpara hacer cosas como desenfocar el fondo.

Mueve el enfoque para ti

No sé mucho sobre estas cosas, pero puedo iniciar VoiceOver en mi Mac y ver cómo el cuadro de diálogo se enfoca cuando aprieto el botón que abre el modal.

No atrapa el enfoque allí y he oído que es ideal para los modales. Tenemos una idea inteligente que puedes explorar utilizando CSS.

Rob Dodson dijo: “Los modales son en realidad la batalla principal al final de la accesibilidad web”. Es bueno que la versión del navegador nativo ayude con mucho de eso. Incluso obtienes automáticamente la Escapefunción de cierre de teclas, lo cual es genial. Sin embargo, no hay ningún clic afuera para cerrar. Quizás algún día esté pendiente del feedback de los usuarios.

El artículo de Ire es un recurso de referencia para crear sus propios cuadros de diálogo y un montón de consideraciones de accesibilidad al usarlos.