Interest Invokers y el atributo Command

El grupo Open UI está estandarizando dos nuevos atributos HTML: command para acciones activadas mediante clic y interesttarget para el «interés» activado mediante desplazamiento o enfoque (la base de los tooltips y las vistas previas). Ambos amplían HTML con comportamientos declarativos que tradicionalmente requerían JavaScript.

Un botón con command="show-modal" y commandfor="dialog-id" muestra un cuadro de diálogo sin ningún JS, reemplazando las llamadas manuales a dialog.showModal(). Otros comandos son: command="close" y command="toggle-popover", command="show-popover".

El conjunto inicial se centra en patrones de interfaz de usuario habituales: mostrar u ocultar cuadros de diálogo (<dialog> integrado), alternar popovers (Popover API) y posiblemente crecerá con el tiempo. Los elementos personalizados pueden declarar qué comandos aceptan mediante controladores de eventos oncommand.

Además de los comandos integrados, la especificación permite cadenas de comandos personalizadas que comienzan por «--». El elemento de destino recibe un evento command que puede gestionar en JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

El atributo interesttarget marca el destino del «interés» de un elemento, normalmente un tooltip que aparece al pasar el cursor o al recibir el enfoque. El navegador gestiona automáticamente el tiempo de espera (300 ms de retraso para detectar la intención de pasar el cursor), la posición (mediante el posicionamiento de anclaje) y el cierre.

El modo de popover hint está diseñado para popovers con estilo de tooltip que aparecen al mostrar interés. No son modales, no roban el enfoque y se cierran cuando desaparece el interés. La combinación de interesttarget + popover="hint" le proporciona un tooltip nativo mediante dos atributos HTML.

Los cuadros de diálogo nativos gestionan el bloqueo del enfoque; los popovers nativos gestionan el apilamiento; y los invocadores de interés nativos gestionan el tiempo de detección de intención al pasar el cursor y anuncian las relaciones a los lectores de pantalla. Reemplazar las implementaciones personalizadas en JS por estas primitivas declarativas mejora de forma fiable la calidad de la accesibilidad.

Estas funciones todavía se están estandarizando. Los nombres exactos de los atributos y el conjunto de comandos pueden cambiar. Las implementaciones en los navegadores están apareciendo primero en Chromium. Para usar estas funciones en producción, espere hasta que se estabilicen los nombres y al menos dos navegadores las distribuyan, probablemente en los próximos uno o dos años.

Cada una de estas funciones reemplaza código JavaScript que se ha escrito y reescrito millones de veces: gestión de cuadros de diálogo, activadores de popovers y comportamiento de tooltips. Trasladar estos patrones a HTML reduce el peso de la página, mejora la coherencia y permite que el navegador aplique optimizaciones.

El grupo comunitario Open UI (open-ui.org) impulsa gran parte de este trabajo: propone, crea prototipos y acompaña a los nuevos elementos y atributos HTML durante el proceso de estandarización. Consulte su blog para conocer las propuestas más recientes.

command, interesttarget, popover, dialog, el posicionamiento de anclaje, las transiciones de vista y los elementos select personalizables forman parte de un mismo impulso coherente para incorporar al navegador los patrones de las bibliotecas de componentes. Cada función por separado es pequeña; juntas representan la mayor ampliación del vocabulario de interfaz de usuario de HTML en años.

Siga las propuestas (open-ui.org), experimente en Chromium con los indicadores experimentales activados y planifique la adopción de estas funciones a medida que se estabilicen. Audite su base de código actual: calcule cuánto JS se dedica a la infraestructura de cuadros de diálogo, popovers y tooltips. Ese código está destinado a reemplazarse en unas pocas versiones.

¿Cuál es la finalidad del atributo command en un botón?

Dos funciones emergentes amplían el vocabulario declarativo de interfaz de usuario de HTML: command + commandfor para acciones activadas mediante clic (mostrar un cuadro modal y alternar un popover), e interesttarget + popover="hint" para tooltips activados al pasar el cursor o recibir el enfoque. Ambas reemplazan patrones comunes de JavaScript por atributos HTML, mejoran la accesibilidad y reducen el tamaño del paquete. Todavía están evolucionando; siga Open UI para conocer su estabilización y distribúyalas a medida que llegue la compatibilidad de los navegadores.