La API de Popover llega a Baseline

Una Kravets

¡Falta muy poco! Una de las funciones que más me entusiasman se lanzó en todos los navegadores modernos y es oficialmente parte de Baseline 2024. Y esta función es la API de Popover. La ventana emergente ofrece muchísimas primitivas y posibilidades de desarrolladores increíbles para crear interfaces en capas, como información sobre herramientas, menús, IUs de enseñanza y mucho más.

Estos son algunos puntos destacados sobre las capacidades de las ventanas emergentes:

• Asciende a la capa superior. Las ventanas emergentes aparecerán en la capa superior, encima del resto de la página, para que no tengas que jugar con z-index.
• Función de descarte ligero Si haces clic fuera del área de la ventana emergente, esta se cerrará y volverá al enfoque.
• Administración predeterminada del enfoque. Al abrir la ventana emergente, la pestaña siguiente se detiene dentro de ella.
• Vinculaciones de teclado accesibles. Si presionas la tecla esc o actívalas dos veces, se cerrará la ventana emergente y se volverá a enfocar.
• Vinculaciones de componentes accesibles. La conexión de un elemento emergente con un activador emergente se activa de manera semántica.

Cómo crear ventanas emergentes

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

• Primero, establece un atributo popover en el elemento que será la ventana emergente.
• Luego, agrega un id único en el elemento emergente.
• Por último, para conectar el botón al elemento emergente, configura el popovertarget del botón en 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 establecer explícitamente los tipos de ventanas emergentes. Por ejemplo, usar un atributo popover simple sin valor equivale a popover="auto". El valor auto habilita el comportamiento de descartar la luz y cierra automáticamente otras ventanas emergentes. Usa popover="manual" y tendrás que agregar un botón de cierre. Las ventanas emergentes manuales no cerrarán otras ventanas emergentes ni permitirán que los usuarios descarten la ventana emergente haciendo clic fuera de la IU. Para crear una ventana emergente manual, usa lo siguiente:

<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>

Diálogo emergente versus modal

Puede que te preguntes si necesitas una ventana emergente cuando existe un diálogo, y la respuesta es: es posible que no.

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

Conclusión y lectura adicional

popover aporta a la plataforma muchas funciones interesantes. Para obtener más información sobre esta API, incluidos más datos sobre la accesibilidad de la función y la documentación relacionada con el conjunto de atributos, aquí hay algunas lecturas recomendadas para obtener más información:

• Semántica y el atributo emergente: ¿qué usar y cuándo? por Hidde de Vries
• En accesibilidad emergente: Qué hace y qué no hace el navegador por Hidde de Vries
• Documentación de MDN en la ventana emergente