La API de Popover llega a Baseline

Una Kravets

¡Falta muy poco! Una de las funciones que más me llama la atención está llegando a todos los navegadores modernos y es oficialmente parte de Baseline 2024. Y esta función es la API de Popover. Popover ofrece muchas primitivas increíbles y posibilidades para desarrolladores a fin de compilar interfaces en capas, como información sobre herramientas, menús, IU de enseñanza y mucho más.

Estos son algunos aspectos destacados de las funciones de ventana emergente:

• Promoción en la capa superior. Las ventanas emergentes aparecerán en la capa superior sobre el resto de la página, por lo que no es necesario que juegues con z-index.
• Funcionalidad para descartar ligeros. Si haces clic fuera del área de la ventana emergente, se cerrará la ventana emergente y se volverá a mostrar el enfoque.
• Administración del enfoque predeterminada: Cuando se abre la ventana emergente, la siguiente pestaña se detiene dentro de la ventana emergente.
• Vinculaciones de teclado accesibles. Si presionas la tecla esc o la presionas dos veces, se cerrará la ventana emergente y se volverá a mostrar el enfoque.
• Vinculaciones de componentes accesibles. La conexión de un elemento de ventana emergente a un activador de ventana emergente de forma semántica

Cómo crear ventanas emergentes

Crear ventanas emergentes es bastante sencillo. Si deseas usar valores predeterminados, lo único que necesitas es un button para activar la ventana emergente y un elemento para activar.

• Primero, establece un atributo popover en el elemento que será el elemento emergente.
• Luego, agrega un id único en el elemento de la ventana emergente.
• Por último, para conectar el botón a la ventana emergente, configura el popovertarget del botón con el valor del id del elemento emergente.

Este proceso se muestra en el siguiente código:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Para tener un control más detallado sobre la ventana emergente, puedes configurar explícitamente los tipos de estas. Por ejemplo, usar un atributo popover vacío sin valor equivale a popover="auto". El valor de auto habilita el comportamiento de descartar luz y cierra automáticamente otras ventanas emergentes. Utiliza popover="manual" y deberás agregar un botón de cierre. Las ventanas emergentes manuales no cierran otras ventanas emergentes ni permiten que los usuarios descarte la ventana emergente haciendo clic fuera de ella en la IU. Puedes crear una ventana emergente manual de la siguiente manera:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Ventana emergente frente a diálogo modal

Es posible que te preguntes si necesitas la ventana emergente cuando existe un diálogo y la respuesta es: tal vez no.

Es importante tener en cuenta que el atributo de ventana emergente no proporciona semántica por sí solo. Si bien ahora puedes crear experiencias similares a las de diálogos modales con ventanas emergentes, existen algunas diferencias clave entre ambos:

Conclusión y lecturas adicionales

popover ofrece muchas funciones emocionantes a la plataforma. Para obtener más información sobre esta API, incluidos más detalles sobre la accesibilidad de la función y documentación sobre el conjunto de funciones, consulta esta lectura recomendada para obtener más información:

• Semántica y el atributo popover: ¿qué usar y cuándo? de Hidde de Vries
• Sobre la accesibilidad de ventanas emergentes: Lo que el navegador hace y lo que no hace, de Hidde de Vries
• Documentación de MDN sobre ventanas emergentes