Asegurando que tus usuarios sigan el camino correcto: el futuro de los Modals y la gestión del enfoque

Ahora, la web ha avanzado mucho, y en realidad, por primera vez este año, todos los navegadores admiten estas increíbles características nuevas que podemos usar como primitivas o como parte de una biblioteca más grande.

En primer lugar, ¿qué es la gestión del enfoque y por qué debería importarte? Creo que esta es la razón fundamental de por qué es importante. Ahora, tenemos aquí un diálogo. Puedo hacer clic en él, puedo enviarlo, pero lo que realmente puedo hacer mientras está en funcionamiento es presionar Tab varias veces y pasar detrás de esta interfaz. Todavía puedo hacer clic en algunos botones que están en la página aquí. Ahora, esto es una demostración, pero muchos sitios tienen este problema si miras a tu alrededor, y el desafío es que es realmente difícil, y durante mucho tiempo, tenemos bibliotecas y polyfills que intentan mantener esto realmente, intentan resolver este problema por ti, pero o no se usan correctamente, simplemente no pueden hacer lo que quieres que hagan, o la gente simplemente se olvida, y usa un mecanismo muy básico y espera que los usuarios nunca lleguen allí, y este ejemplo es obviamente bastante complicado, no todos saben cómo pasar detrás de los elementos de la interfaz, pero este tipo de problema se filtrará de otras formas, causando a los usuarios un comportamiento extraño, y algunos ejemplos aquí.

Para ser muy preciso, las cosas de las que quiero hablar hoy son el diálogo y una nota. Ahora, estos son los dos nuevos conceptos que están disponibles en los navegadores este año, y ambos son muy interesantes. En términos de especificaciones, en realidad son bastante antiguos, se escribieron hace mucho tiempo, pero como mencioné, es la primera vez que puedes usarlos en prácticamente todos los navegadores sin problemas.

Entonces, antes de continuar, ¿quién soy yo y por qué te estoy hablando? Soy un ex empleado de Google, estuve allí durante más de 10 años, fue realmente divertido, formé parte del equipo de relaciones con los desarrolladores, y parte de mi trabajo era hacer este tipo de divulgación. De hecho, recientemente dejé Google y me uní a una pequeña startup en etapa inicial en el espacio de la energía verde llamada Gridcog, es muy divertido, recomendaría trabajar en el ámbito del clima, es algo importante, y siempre estoy dispuesto a hablar con la gente sobre eso, independientemente del contenido de esta charla.

Dicho esto, nuestra tecnología todavía está en la web, por lo que queremos utilizar estas características incluso en nuestro producto SaaS para mejorar la experiencia de usuario. Y mi sensación general de por qué estoy aquí y hablando de estos conceptos en general, y por qué quiero esto en mi navegador, quiero esto en mi aplicación web, es que para mí, estas nuevas características nos permiten deshacernos de toneladas de código antiguo que hacía trucos extraños y cosas horribles en los navegadores para las que realmente no estaban diseñados. Por lo tanto, tener nuevas primitivas en 2022 es realmente maravilloso, puedo deshacerme de todo este código y dedicarme a las partes más interesantes de mi trabajo. No lidiar con la gestión del enfoque, sino escribir aplicaciones que hagan cosas interesantes. Entonces, el primer componente del que hablaré hoy se llama elemento de diálogo. Ahora, el diálogo puede hacer muchas cosas, la especificación es bastante amplia. Pero la razón por la que más nos importa como desarrolladores web es que puedo crear este elemento en mi página, donde quiera, y luego llamar a showModal en JavaScript. Lo que esto hace es crear ese diálogo en lo que se llama una capa superior. Ahora, la capa superior es especial, nos ofrece dos cosas. En primer lugar, no puedo hacer clic detrás de ella, se ha resuelto el problema del enfoque, mientras esté visible, no puedo interactuar con nada debajo de ella, incluidos otros diálogos que haya abierto anteriormente. Lo segundo que es realmente genial aquí es que en realidad existe fuera de la capa de representación normal del navegador. Está en una cosa llamada capa superior, lo que significa que incluso si estás dentro de algún contexto de apilamiento extraño o tus índices Z son extraños, el diálogo siempre estará en la parte superior. Me gusta demostrar esto, si puedes ver aquí, tengo este elemento extraño que está transformado de formas extrañas. Si hago clic en este botón, el diálogo en realidad está dentro de este elemento transformado, pero el navegador simplemente ignorará todo eso y lo elevará a la parte superior. Así que de esa manera, es bastante genial. Está delimitado y encapsulado de tal manera que puedes usarlo en un componente o alguna biblioteca y seguirá apareciendo en la parte superior, listo para que el usuario interactúe con él.

Ahora, esa es la parte más interesante del diálogo para mí, pero hay algunas otras cosas que quiero cubrir antes de continuar.

Uno de ellos es este elemento de fondo, por lo que cada diálogo tendrá de forma gratuita un elemento de pantalla completa. Puedes cambiar su color o fondo o lo que sea. También tiene un controlador incorporado para la tecla Escape. Ahora esto es un poco extraño pero refleja cuando se creó en 2014, pero si presiono Escape en mi teclado ahora, este diálogo se cerrará, y está bien, pero es un poco extraño porque no hay una analogía en dispositivos móviles u otras plataformas. Sabes, no puedes presionar el botón de retroceso en tu teléfono móvil para cerrarlo. Desafortunadamente, eso te llevará a la página anterior. Hay algo que viene en camino llamado Close Watcher como un poco aparte, que está totalmente en estado de borrador en este momento, lo cual ayuda a lidiar con cosas como cerrar diálogos, y de hecho, es uno de los ejemplos mencionados en su descripción, pero quién sabe si eso sucederá. Mi consejo, sinceramente, es que si no deseas este comportamiento, puedes agregar un controlador de eventos para el evento Cancelar, y luego presionar Escape no hará nada, ¿verdad? Y puedes controlar esa interacción con el teclado, o tal vez cerrar el diálogo con botones. Puedes hacerlo completamente por ti mismo.

Lo siguiente de lo que quiero hablar es una Nota. Ahora, esta es una característica completamente diferente. No tiene nada que ver con el diálogo anterior, pero también te permite construir aplicaciones interesantes juntas. Esto es algo donde puedo marcar cualquier subárbol de mi DOM como una Nota. Ahora, lo que esto significa es que no puedo hacer clic en él, no puedo interactuar con él, no puedo tocarlo. Básicamente, es como una mejor versión de pointerEvents None. Y eso es algo que la gente usa a menudo, ¿verdad? Simplemente dicen, bueno, no puedo hacer clic en esta área, por lo tanto no puedes usarla, ¿verdad? Bueno, no, como puedes ver en mi ejemplo anterior, es muy fácil tocar detrás de esa área. Entonces, una Nota básicamente te brinda eso de forma gratuita, pero también hace que todo el espacio, cualquier cosa en este espacio sea inutilizable. Ahora, esto es un primitivo muy amplio, ¿verdad? Como, más adelante mostraré algunos ejemplos, pero vale la pena pensarlo, ¿verdad? Puedes construir muchas cosas con ello. Una desventaja interesante es que en realidad no puedes desactivarlo. Una vez que un árbol DOM es inerte, eso es todo, no puedo hacer que alguna subsección sea inerte. Ahora, si consideras que eso es una característica o un error, bueno, eso depende de ti, pero para mí, es como una característica, ¿verdad? Si tengo un sistema de componentes y digo, bueno, todo dentro de mí está desactivado. Algo dentro de ese sistema no puede decir, oh, no, realmente quiero estar activado, ¿verdad? Así que desactiva todo hasta el final.

Y así, el último componente del que quiero hablar es en realidad bastante antiguo. Es el field set. Ahora, podrías pensar en el field set como una forma agradable de agrupar elementos de entrada juntos. Pero lo que no sabes o lo que quizás no sepas es que puedes desactivar el field set. Lo que esto hace es algo así como una versión menor de inert. Va a propagar ese desactivado a cualquier elemento de formulario HTML dentro del field set. Los enlaces seguirán siendo clicables, pero un input o un botón serán de solo lectura y desactivados.

Ahora, esto no es tan bueno como inert, ¿verdad? Hace menos cosas. Inert aún no está disponible en Firefox. Está en la versión nocturna, lo que significa que probablemente se lanzará pronto, pero esta es una alternativa interesante que puedes usar si todo tu problema es simplemente enviar un formulario, ¿verdad? No quiero que los usuarios puedan interactuar con un formulario mientras está en progreso. Y no quiero modificar cada campo. Solo puedo envolverlo en un field set y decir, desactivado, y listo. Tiene una peculiaridad extraña con el shadow DOM, pero posiblemente sea un error más que una característica en el sentido de que no se propaga a los elementos dentro de la ruta de sombra de un shadow DOM.

Y una de las razones por las que estoy emocionado de hablar hoy es que estos tres elementos funcionan perfectamente. Firefox, Safari y Chrome admiten casi todas estas características. Como puedes ver, y como mencioné, Firefox está un poco rezagado en cuanto a Inert. Pero honestamente, para cuando veas esta charla, probablemente ya estará disponible. Puedes comenzar a usar estas cosas. Estos son primitivos, sin embargo. Puedes usarlos directamente, está bien. También puedes considerar usarlos como parte de un marco de trabajo o una biblioteca. Y espero que algunas bibliotecas básicamente tengan una forma rápida de decir, tenemos esta increíble nueva característica. No necesitamos hacer nuestros viejos trucos extraños. Podemos aprovechar Inert, Diálogo o incluso Fieldset, aunque es posible que ya lo estén haciendo. Eso es bastante antiguo.

Ahora, con estos increíbles nuevos primitivos introducidos, vale la pena hablar de cómo hemos llegado hasta aquí. Ahora, sabes, los navegadores fueron escritos para una época antigua donde los documentos eran documentos, ¿verdad? Hacías clic en enlaces, podías ir a otras páginas, y no se veían experiencias tipo aplicaciones. Pero a medida que hemos agregado más funcionalidad a la web y la hemos convertido en esta increíble plataforma para construir cosas interesantes, hemos necesitado controlar su enfoque de manera más precisa. Las herramientas que las personas han tenido disponibles a lo largo de los años son cosas como simplemente eliminar enlaces, ya sabes, hacer que un botón esté desactivado uno por uno. Mencioné los eventos de puntero que vinieron con IE11, y fue como una nueva era en tratar de guiar o guiar a las personas a través de tu aplicación de una manera agradable, amigable y orgánica.

Y así, los desafíos de hacer cosas como Inert o Disabled era que los eventos de puntero, como mencioné, pueden escaparse de manera trivial, ¿verdad? No puedo simplemente ocultar un elemento detrás de un div. Podría desactivar manualmente los elementos de entrada o, ya sabes, desactivar el HRF en un enlace, pero tendrías que hacerlo para cada uno. ¿Y si ya estaba desactivado? ¿Y si estás en una sombra de raíz? ¿Y si todas estas suposiciones, ¿verdad? Y los polyfills mejoran esto un poco, pero son hacks horribles, ¿verdad? Y uno de los desafíos con estas cosas es que no puedo interceptar realmente la intención o los objetivos del usuario a nivel global. Ahora, estos nuevos primitivos que tenemos nos permiten hacer eso de una manera mucho más agradable.

Y también vale la pena mencionar que crear un diálogo sin un primitivo incorporado también es bastante desafiante. El más grande es que a menudo no está claro si puedes elevarte hasta la parte superior de la página. ¿Sabes si la posición fija hace lo que quieres en la posición en la que te encuentras actualmente? Y como viste en la demostración anterior, con el diálogo incorporado real, eso ya no es un problema. Puedo tener simplemente un componente que cree un diálogo y aparecerá en la parte superior, que es básicamente lo que siempre quiero cuando encapsulo elementos juntos.

Frameworks, diré, pueden ayudar. Y si estás construyendo tu aplicación completamente dentro de un framework como React, entonces el diálogo puede ser un problema resuelto para ti. Sé que cuando escribo código React, usamos una biblioteca que elevará automáticamente ese elemento al nivel superior por ti, ¿verdad? Como el hecho de que sea un diálogo dentro de mi componente React es irrelevante, ¿verdad? De todos modos se renderiza en otro lugar. Pero algunos frameworks no permiten eso. Algunos diseños nunca admitirán ese comportamiento, por lo que tener un primitivo de diálogo incorporado es muy útil.

En general, lo que estás tratando de evitar es luchar contra el navegador. Como mencioné, los navegadores fueron diseñados fundamentalmente para documentos, no aplicaciones. Los polyfills intentan interceptar y anular cada evento de enfoque de formas totalmente extrañas, pero es inútil. Siempre hay más casos. Ahora que hemos llegado hasta aquí y te he dado una pequeña lección de historia, hablemos de algunas de las razones por las que podrías usar estos componentes.

Ahora, Inert y Fieldset son bastante buenos para controlar formularios y controlar partes de tu interfaz de usuario donde los usuarios no deben interactuar después de que se haya realizado alguna acción. Y así, en este ejemplo, tengo este formulario bastante elegante. Y cuando presiono enviar, sí, puedo bloquearlo todo casi de inmediato y decir, no marques esto, estoy, ya sabes, procesando un pago o algo así. Incluso puedo superponer un div aquí mostrándoles un botón de cancelar o algún comportamiento por el que realmente quiero que los usuarios pasen. Y lo importante aquí es que no tengo que marcar el formulario subyacente, ¿verdad? No tengo que preocuparme por deshabilitar cosas. Simplemente puedo marcar todo el conjunto como inerte y crear un nuevo estado interesante para que mis usuarios lo utilicen. Ahora, esto es un subárbol. Tal vez pueda hacerlo para una barra lateral o una parte más grande de mi aplicación con la que los usuarios no deben interactuar durante algún tiempo por cualquier motivo.

Ahora, ya sabes, puedes irte con esta charla y crear algunas experiencias interesantes y tengo algunas ideas aquí, pero creo que estos son primitivos maravillosos, ¿verdad? Creo que veremos en los próximos años cómo las personas los utilizan de formas muy diferentes.

Entonces, ahora hablemos sobre el diálogo y vale la pena mencionarlo y dejarlo claro. No soy fan de que uses un RealModal o incluso un div gigante para bloquear cosas intersticiales como registrarse en mi boletín cuando realmente solo quiero leer tu contenido. Creo que todos nosotros como desarrolladores sabemos que es un patrón terrible. Pero dicho esto, habrá casos en los que necesitemos mostrar un RealModal en tu página web. Puede ser porque los usuarios, no sé, están guardando algún estado que están confirmando, ¿sabes, quieren irse? ¿Están seguros de que quieren cancelar? Y en este ejemplo aquí, tenemos un diálogo bastante bueno y agradable que muestra, ya sabes, los tipos de usuario y el contenido del documento, pero no están seguros si están listos para terminar o algo así. Y les damos algunas opciones aquí que hacen que esta experiencia se sienta bastante bien. Tienes un botón de cerrar para deshacerte de él. Tenemos un botón de cancelar y podemos usar este modal de una manera interesante. Ya sabes, hay muchas cosas sucediendo detrás de la página aquí y el usuario no tiene que preocuparse por eso. Solo pueden enfocarse en una cosa durante un período de tiempo determinado y los modales realmente brillan en este ejemplo.

Ahora, otra cosa que podemos hacer con el diálogo es animarlo. Al final, es un div, ¿verdad? Es un div elegante que tiene algunas propiedades mágicas y se representa en un lugar extraño, pero es un primitivo que puedo usar de la manera que quiera. Entonces, cuando muestro un diálogo, puedo combinar la llamada showModal con, tal vez voy a comenzar el diálogo fuera de la pantalla y luego dejar que se anime en un segundo. Una cosa interesante que incluso puedo hacer aquí es deshabilitar la interacción en el diálogo con inert durante ese tiempo. Ahora, tal vez un segundo sea demasiado tiempo, pero entiendes la idea. De manera similar, cuando se cierra, sí, hay un método de cierre incorporado. Sí, hay un control de escape que puedo evitar que suceda. Y cuando se cierra un diálogo, en realidad no puedo cerrarlo durante el mismo período de tiempo. Puedo decir que tal vez durante un corto período, se anima y una vez que eso se hace, luego lo cierro correctamente. Al final, es solo un primitivo, ¿verdad? Como debería envolver este comportamiento en algún otro componente o ayudante que lo haga por mí, porque el método de cierre no es algo que un usuario necesariamente deba llamar directamente. Es algo que puedes controlar.

Así que me gustaría terminar esta charla hablando sobre algunas otras cosas que el diálogo puede hacer. Creo que vale la pena ser completo, pero seré claro, creo que estas cosas son la parte menos interesante del diálogo. Ahora, para una mejor historia, ¿verdad? Chrome introdujo el diálogo en 2014. Eso fue literalmente hace ocho años y Safari y Firefox recién se han sumado y han construido esa función. Y eso es genial, ¿verdad? Por eso la charla está aquí hoy y puedo decir, por favor, usa el diálogo, está disponible en todas partes. Pero diré que algunas de sus características extrañas se construyeron para una parte diferente de la web. Ahora tiene soporte no modal. Puedo simplemente alternar este atributo abierto y el diálogo aparecerá y desaparecerá.

Pero no bloquea la página, no se renderiza de manera extraña. Y por lo tanto, es algo inútil, ¿verdad? Es solo un div en este sentido. También permite una cosa llamada diálogo de método de formulario. Ahora, esto es bastante lindo, ¿verdad? Creas un formulario y cuando se envía, se cerrará automáticamente el diálogo que lo rodea. Pero la realidad es que lo que hacemos para cualquier otro formulario en la web hoy en día, o queremos interceptarlo con JavaScript o lo que sea, es sobrecargar su método de envío y luego prevenir el valor predeterminado. Ahora, no sé por qué existe el diálogo de método de formulario cuando literalmente puedo hacer esto con un diálogo regular que tiene un método de formulario implícito que simplemente desactivo o ignoro con JavaScript. De hecho, ya estoy usando el diálogo con JavaScript. Así que me resulta extraño que tengamos esta extraña forma de diálogo que establece un valor de retorno en el diálogo. Puede que te resulte útil, pero honestamente, creo que es parte de una especificación que no ha envejecido muy bien. Así que solo menciono estas cosas para completar. No quiero terminar de manera negativa, ¿verdad? Lo importante de esta charla es que el diálogo es un primitivo increíble que te brinda una experiencia modal que se puede utilizar de muchas formas, pero que existe en la capa superior, se puede encapsular fácilmente y se puede usar en componentes. Y con suerte, te dará lo que has deseado durante mucho tiempo, pero tal vez temías los montones de JavaScript o los hacks horribles para lograrlo. Y no, es muy similar e incluso el field set, sé que no está disponible porque Firefox está un poco rezagado, también te brindará la mayor parte de esa funcionalidad, ¿verdad? Puedes deshabilitar rápidamente los formularios y, aunque suene como algo realmente tonto que debas poder hacer, es bastante útil tenerlo en tu caja de herramientas. Así que espero que te lleves estas ideas y las pongas en práctica. Diré una cosa que no he mencionado extensamente es la accesibilidad, o realmente en absoluto. Ahora, todas estas cosas harán lo correcto, pero te animo a que leas si esto es importante para ti cómo interactúan estas cosas con el árbol de accesibilidad. No soy un experto y no creo que debas usar estas características sin ningún conocimiento al respecto. Gracias por escuchar. Estoy en Twitter, puedes seguirme en varios lugares. Regularmente escribo en mi blog sobre este tipo de cosas. Puedes ver mi blog aquí y suscribirte a él con tu lector de RSS favorito, y gracias a JS Nation por tenerme, y espero verte en internet. Adiós. ♪ Música rock ♪