Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes

Quiero hablarles sobre los diálogos y los popovers. Ahora, todos sabemos que la web solía ser lineal, ¿verdad? Teníamos texto e imágenes. Cada vez más, nos gusta colocar cosas encima de otras cosas. Hoy les hablaré sobre dos cosas que realmente pueden ayudarte con eso, desde la especificación de HTML.

Uno es el elemento de diálogo que ha existido por un tiempo, y recientemente, también se ha vuelto compatible con la accessibility. Luego, en segundo lugar, los atributos de popover, que es un atributo completamente nuevo que llega a la web. Se ha agregado a Chrome la semana pasada y a Chrome estable. También se está desarrollando en todos los demás navegadores.

Un ejemplo de un popover es cuando tienes un poco de interfaz de usuario y quieres explicárselo a tus usuarios. En este caso, hay un artículo de The Economist. Tienen un reproductor de audio, y muestran al usuario, ya sabes, puedes hacer clic aquí para escuchar tu artículo. Puedes hacer todo tipo de cosas con los popovers, como el otro día cuando estaba en una reunión de negocios muy seria y Microsoft Teams me dijo que usara integraciones de Excel. Eso es algo que hacen. También me han dicho que sea yo mismo expresivo, mi yo expresivo, usando como un avatar. Puedes usar los popovers para todo tipo de cosas. Slack lo hace un poco mejor al decirte que te ves bien cuando pasas el cursor sobre ti mismo. Prefiero eso al anterior, para ser honesto.

Ahora veamos las diferencias entre los diálogos y los popovers, comenzando con el elemento de diálogo. Entonces, el diálogo es un elemento de HTML, así que no estoy hablando de cualquier diálogo que estés construyendo, sino del elemento real en HTML. Viene con el rol de diálogo, por lo que la semántica está incorporada, y tiene una configuración modal. La forma de usarlo es en el script, por lo que puedes encontrar el elemento en el DOM y luego simplemente llamar a showModal en él. Eso lo muestra como un diálogo modal. Y también puedes llamar a show, que hará un diálogo no modal.

Ahora, el popover es un nuevo conjunto de comportamientos que puedes agregar a cualquier elemento que desees. Es un atributo que agregas a un elemento para construir cosas como sugerencias de elementos de formulario, selectores de contenido, interfaces de enseñanza, listas desplegables y menús de acciones. Y lo genial del popover es que también funciona sin JavaScript. La forma de hacer un popover es básicamente agregando el atributo de popover a cualquier elemento que lo convierte en un popover. Luego le das un ID y luego puedes apuntar a ese ID desde un atributo de popover-targets en un botón. A partir de ese momento, ese botón se convierte en un interruptor para tu popover. Así que he hecho uno muy feo en esta captura de pantalla, pero básicamente tienes el botón, tienes tu div, y puedes poner lo que quieras ahí dentro.

Se convierte en un popover que se puede controlar sin JavaScript. Ahora, por supuesto, también puedes hacerlo en JavaScript. Entonces puedes llamar al método de mostrar popover en tu elemento, y eso también lo mostrará. Luego puedes usar eso si quieres hacer popovers temporizados, como lo estaba haciendo Microsoft Teams conmigo, que aparecía y desaparecía en ciertos momentos.

Ahora, trabajando en popovers y diálogos y aprendiendo cómo funcionan, me surgió esta pregunta, ¿cómo son realmente diferentes estos patrones? Parecen bastante similares. Así que quiero llevarte a través de un par de ejes diferentes en los que realmente son diferentes.

Uno es modal versus no modal. Ahora, modal significa que un elemento, si es modal, es lo único con lo que el usuario puede interactuar. Todo lo demás está bloqueado, por lo que no puedes seleccionar texto, no puedes hacer clic, no puedes desplazarte, idealmente. Por lo tanto, cualquier otra cosa es imposible, solo puedes hacer las partes modales. Eso es útil cuando has decidido rastrear a tus usuarios, y según la ley europea, necesitas pedir consentimiento. Entonces, si haces eso, probablemente quieras usar un modal, porque no puedes colocar ninguna cookie antes de haber pedido permiso, y tampoco quieres que tus usuarios naveguen por tu sitio web sin rastrearlos, supongo, porque ese es tu objetivo allí.

Los diálogos no modales son cosas como menús en tus aplicaciones, como este, donde estás editando una imagen, y obtienes algunas opciones para esa imagen, o widgets de chat que pueden aparecer sobre tu contenido. Ahora, deben poder cerrarse fácilmente, y es importante que puedas hacer otras cosas en la página web, como en este caso, puedo imaginar que las personas solo quieren continuar reservando su viaje, y no quieren hablar contigo o chatear, por lo que quieres que sea fácil de cerrar. Hablando de cerrar, hay diferentes formas de cerrar. Una es el cierre explícito, que es lo que sucede cuando tienes un botón y necesitas hacer clic en él, o cuando un script lo elimina realmente, y hay un cierre ligero, que es una especie de cierre automático. Entonces, cuando estás eligiendo una fuente en Google Docs, obtienes esta lista de fuentes, pero cuando comienzas a desplazarte o haces clic fuera de ella, simplemente desaparece. No necesitas hacer nada especial para que desaparezca.

Luego, el apilamiento. Probablemente todos estemos familiarizados con el índice Z en CSS. Te permite apilar elementos uno encima del otro y controlar el orden en que eso sucede. Entonces, si le asignas un índice Z de uno a un elemento y un índice Z de dos al otro, el dos estará por encima del uno porque es un número más alto, y probablemente todos hayamos visto números muy altos en nuestras bases de código. Ahora, lo genial de la capa superior es que ocurre por encima de todo. Por lo tanto, el apilamiento Z ocurre en tu cuerpo, y puedes ver esto como una capa separada de cualquier otra cosa en tu cuerpo. También significa que no puedes posicionar nada en relación con cosas que no están en la capa superior.

Luego, los fondos, a veces pueden ser útiles para llamar la atención sobre ciertos elementos, y para elementos modales también ayuda a mostrar que son modales y que las otras cosas no están disponibles actualmente. Los elementos de la capa superior vienen con un fondo de forma gratuita en el navegador, y puedes darle estilo con ::backdrop en tu CSS, y luego puedes hacer cosas como cambiar el color o agregar un poco de desenfoque o hacer todo tipo de otras cosas que CSS te permite hacer. Por lo tanto, eso es muy útil y solo ocurre con elementos de la capa superior específicamente.

Y por último, hay trampas de enfoque del teclado. Entonces, cuando estás construyendo un modal, a veces quieres atrapar a las personas dentro de ese modal.

Con los modales, eso es bastante común. Hay otros elementos como widgets de calendario si son realmente complejos. A veces también quieres evitar que las personas se desplacen accidentalmente fuera. Siempre es temporal. Entonces, todos estos ejes, ¿cómo se relacionan con nuestros diálogos y nuestros popovers? Bueno, el primero, modal, un diálogo mostraría modal o un diálogo modal es obviamente modal, y luego un diálogo que muestra no modal y el popover también lo es.

Hablando de cierre, un popover en el modo automático que es el valor predeterminado se cerrará mientras que un popover en el modo manual deberá cerrarse explícitamente. Y lo mismo ocurre con cualquier diálogo que tengas. Ahora hablando de índices Z, popovers, y diálogos modales, ambos van a la capa superior mientras que todo lo demás necesitará lidiar con índices Z si quieres ponerlo encima de otras cosas. Y eso puede volverse fácilmente bastante complicado si tienes muchos componentes en una página y no sabes de antemano cuáles estarán allí. Digamos que tienes un tooltip abierto pero también tienes una superposición modal que le dice al usuario que está a punto de agotarse el tiempo. No quieres que ese tooltip esté encima de tu superposición modal. Así que hay todo tipo de consideraciones en las que los popovers y los diálogos modales te ayudan.

Luego, los fondos, vienen de forma gratuita como mencioné con elementos de la capa superior. Entonces, nuevamente, eso viene con el popover y con los diálogos modales. Pero si los estás agregando a los popovers, tal vez realmente quieras construir un diálogo modal porque si no vas a hacer que todo lo demás esté no disponible, ¿por qué ocultarlo con un fondo? Ahora, algo en qué pensar, hay casos de uso pero no son muy comunes. Por último, los atrapamientos de enfoque del teclado. Los obtienes de forma gratuita con los diálogos modales. Entonces, si tienes un elemento de diálogo que abres con, mostrar modal.

Ahora hay dos, o un artículo que quería compartir específicamente sobre popovers y diálogos, que entra en toda esa historia de la capa superior por Adrian Roselli. Recomiendo leer eso. También quiero mencionar brevemente el soporte del navegador. Como mencioné, el popover acaba de ser lanzado en Chrome estable. También llegará a Edge porque se basa en Chromium 2 y luego llegará a Safari porque ya está en vista previa técnica y Firefox está trabajando en implementarlo también junto con Daigalia. El diálogo es compatible prácticamente en todas partes. Tengo algunas comparaciones aquí en mis diapositivas, pero te remitiré a las diapositivas que pondré a disposición más adelante. Quiero dejarte con algunas preguntas abiertas que todavía tenemos y en las que todavía estamos trabajando en Open UI para el popover. Posicionamiento, ahora puedes usar una biblioteca de JS y el posicionamiento de anclaje en el futuro. Semántica, hice una publicación de blog específicamente sobre eso y otros casos de uso como consejos y una variante asíncrona. Eso es todo por mi parte. Soy HTV Everywhere, y compartiré estas diapositivas en mis redes sociales más tarde. Gracias.