Déclencheurs d’intérêt et attribut `command`

Le groupe Open UI normalise deux nouveaux attributs HTML : command pour les actions déclenchées par un clic, et interesttarget pour l’« intérêt » déclenché par un survol ou une mise au point, à la base des info-bulles et des aperçus. Tous deux ajoutent à HTML des comportements déclaratifs qui nécessitaient traditionnellement JavaScript.

Un bouton doté de command="show-modal" et de commandfor="dialog-id" affiche une boîte de dialogue sans aucun JS, ce qui remplace les appels manuels à dialog.showModal(). Autres commandes : command="close", command="toggle-popover", command="show-popover".

Le jeu initial cible les modèles d’interface courants : afficher ou masquer des boîtes de dialogue (avec <dialog> intégré), activer ou désactiver des superpositions (API Popover), et pourrait s’enrichir avec le temps. Les éléments personnalisés peuvent déclarer les commandes qu’ils acceptent au moyen de gestionnaires d’événements oncommand.

Au-delà des commandes intégrées, la spécification autorise des chaînes de commande personnalisées commençant par « -- ». L’élément cible reçoit un événement command que vous pouvez gérer en JS : el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

L’attribut interesttarget désigne la cible d’« intérêt » d’un élément, généralement une info-bulle qui apparaît lors d’un survol ou d’une mise au point. Le navigateur gère automatiquement le délai (300 ms d’intention de survol), le positionnement (avec le positionnement par ancrage) et la fermeture.

Le mode de superposition hint est conçu pour les superpositions de type info-bulle qui apparaissent lorsqu’un élément suscite de l’intérêt. Elles ne sont pas modales, ne prennent pas le focus et se ferment lorsque l’intérêt disparaît. L’association de interesttarget et de popover="hint" vous fournit une info-bulle native au moyen de deux attributs HTML.

Les boîtes de dialogue natives gèrent le confinement du focus ; les superpositions natives gèrent la superposition des éléments ; les déclencheurs d’intérêt natifs gèrent le délai d’intention de survol et signalent les relations aux lecteurs d’écran. Remplacer les implémentations JS personnalisées par ces éléments déclaratifs améliore de manière fiable la qualité de l’accessibilité.

Ces fonctionnalités sont encore en cours de normalisation. Les noms exacts des attributs et l’ensemble des commandes peuvent changer. Les implémentations dans les navigateurs apparaissent d’abord dans Chromium. Pour une utilisation en production, attendez que la nomenclature se stabilise et qu’au moins deux navigateurs les proposent, probablement dans un délai d’un à deux ans.

Chacune de ces fonctionnalités remplace du JavaScript qui a été écrit et réécrit des millions de fois : gestion des boîtes de dialogue, déclencheurs de superpositions et comportement des info-bulles. Déplacer ces modèles dans HTML réduit le poids des pages, améliore la cohérence et permet au navigateur d’appliquer des optimisations.

Le groupe communautaire Open UI (open-ui.org) est à l’origine d’une grande partie de ce travail : il propose, met au point et accompagne de nouveaux éléments et attributs HTML tout au long du processus de normalisation. Consultez son blog pour découvrir les dernières propositions.

Les commandes, les cibles d’intérêt, les superpositions, les boîtes de dialogue, le positionnement par ancrage, les transitions de vue et les listes de sélection personnalisables s’inscrivent tous dans une même volonté cohérente d’intégrer à la plateforme les modèles des bibliothèques de composants. Chacun de ces éléments est modeste pris isolément ; ensemble, ils représentent la plus grande extension du vocabulaire d’interface de HTML depuis des années.

Suivez les propositions (open-ui.org), faites des essais dans Chromium avec les indicateurs activés et prévoyez d’adopter ces fonctionnalités à mesure qu’elles se stabilisent. Examinez votre base de code existante : comptez la quantité de JS consacrée à l’infrastructure des boîtes de dialogue, des superpositions et des info-bulles. Ce code est destiné à être remplacé au cours des prochaines versions.

Quel est le rôle de l’attribut de commande sur un bouton ?

Deux fonctionnalités émergentes enrichissent le vocabulaire déclaratif des interfaces de HTML : command + commandfor pour les actions déclenchées par un clic (afficher une boîte de dialogue modale, activer ou désactiver une superposition) et interesttarget + popover="hint" pour les info-bulles déclenchées par un survol ou une mise au point. Toutes deux remplacent des modèles JavaScript courants par des attributs HTML, améliorant l’accessibilité et réduisant la taille du paquet. Elles évoluent encore ; suivez Open UI pour leur stabilisation et adoptez-les à mesure que la prise en charge par les navigateurs arrive.