Interest Invokers e attributo command

Il gruppo Open UI sta standardizzando due nuovi attributi HTML: command per le azioni attivate con un clic e interesttarget per l'«interesse» attivato al passaggio del mouse o con il focus, alla base di tooltip e anteprime. Entrambi estendono HTML con comportamenti dichiarativi che tradizionalmente richiedevano JavaScript.

Un pulsante con command="show-modal" e commandfor="dialog-id" mostra una finestra di dialogo senza alcun JS, sostituendo le chiamate manuali a dialog.showModal(). Altri comandi: command="close", command="toggle-popover", command="show-popover".

Il set iniziale riguarda pattern comuni dell'interfaccia: mostrare e nascondere finestre di dialogo (<dialog> integrato), attivare e disattivare i popover (Popover API), e potrebbe ampliarsi nel tempo. Gli elementi custom possono dichiarare quali comandi accettano tramite gestori di eventi oncommand.

Oltre ai comandi integrati, la specifica consente stringhe di comando personalizzate che iniziano con "--". L'elemento target riceve un evento command che può essere gestito in JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

L'attributo interesttarget identifica il target dell'«interesse» di un elemento, in genere un tooltip che appare al passaggio del mouse o quando l'elemento riceve il focus. Il browser gestisce automaticamente i tempi (un ritardo di 300 ms per l'intenzione di passaggio), il posizionamento (con l'anchor positioning) e la chiusura.

La modalità hint dei popover è progettata per i popover simili a tooltip che appaiono quando l'elemento suscita interesse. Non sono modali, non sottraggono il focus e si chiudono quando l'interesse viene meno. La combinazione di interesttarget + popover="hint" offre un tooltip nativo con due attributi HTML.

Le finestre di dialogo native gestiscono il confinamento del focus; i popover nativi gestiscono la sovrapposizione; gli invocatori nativi di interest gestiscono i tempi dell'intenzione di passaggio e comunicano le relazioni ai lettori di schermo. Sostituire le implementazioni personalizzate in JS con queste primitive dichiarative migliora in modo affidabile la qualità dell'accessibilità.

Queste funzionalità sono ancora in fase di standardizzazione. I nomi esatti degli attributi e l'insieme dei comandi potrebbero cambiare. Le implementazioni nei browser stanno comparendo prima in Chromium. Per l'uso in produzione, è consigliabile attendere che i nomi si stabilizzino e che almeno due browser offrano il supporto, probabilmente entro il prossimo anno o i due anni successivi.

Ognuna di queste funzionalità sostituisce codice JavaScript scritto e riscritto milioni di volte: gestione delle finestre di dialogo, trigger dei popover e comportamento dei tooltip. Spostare questi pattern in HTML riduce il peso della pagina, migliora la coerenza e consente al browser di applicare ottimizzazioni.

Il gruppo della comunità Open UI (open-ui.org) guida gran parte di questo lavoro: propone e prototipa nuovi elementi e attributi HTML e ne accompagna l'inserimento nel processo di standardizzazione. Segua il loro blog per conoscere le proposte più recenti.

command, interesttarget, popover, dialog, anchor positioning, view transitions e i select personalizzabili fanno tutti parte di un'unica spinta coerente a portare nella piattaforma i pattern delle librerie di componenti. Presa singolarmente, ognuna è una piccola novità; insieme rappresentano la più grande espansione del vocabolario dell'interfaccia HTML degli ultimi anni.

Segua le proposte (open-ui.org), faccia esperimenti in Chromium con le flag abilitate e pianifichi l'adozione delle funzionalità man mano che si stabilizzano. Analizzi il codice esistente: conti quanto JS è dedicato alla gestione di finestre di dialogo, popover e tooltip. Quel codice è destinato a essere sostituito nel giro di alcune release.

Qual è lo scopo dell'attributo command su un pulsante?

Due funzionalità emergenti ampliano il vocabolario dell'interfaccia dichiarativa di HTML: command + commandfor per le azioni attivate con un clic (mostrare una finestra modale, attivare o disattivare un popover) e interesttarget + popover="hint" per i tooltip attivati al passaggio del mouse o con il focus. Entrambe sostituiscono pattern JavaScript comuni con attributi HTML, migliorando l'accessibilità e riducendo le dimensioni del bundle. Sono ancora in evoluzione: segua Open UI per verificarne la stabilizzazione e le adotti quando arriverà il supporto nei browser.