Interest Invokers und das command-Attribut

Die Open-UI-Gruppe standardisiert zwei neue HTML-Attribute – command für durch Klick ausgelöste Aktionen und interesttarget für durch Hover oder Fokus ausgelöstes „Interesse“, die Grundlage für Tooltips und Vorschauen. Beide erweitern HTML um deklarative Verhaltensweisen, für die traditionell JavaScript erforderlich war.

Ein Button mit command="show-modal" und commandfor="dialog-id" zeigt einen Dialog ganz ohne JS an und ersetzt manuelle Aufrufe von dialog.showModal(). Weitere Befehle sind: command="close", command="toggle-popover", command="show-popover".

Die erste Befehlsgruppe zielt auf gängige UI-Muster: das Anzeigen und Ausblenden von Dialogen (integriertes <dialog>), das Umschalten von Popovers (Popover API) und eine mögliche Erweiterung im Laufe der Zeit. Benutzerdefinierte Elemente können über oncommand-Event-Handler angeben, welche Befehle sie akzeptieren.

Neben den integrierten Befehlen erlaubt die Spezifikation benutzerdefinierte Befehlszeichenfolgen, die mit „--“ beginnen. Das Zielelement empfängt ein command-Ereignis, das Sie in JS verarbeiten können: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

Das Attribut interesttarget kennzeichnet das „Interest“-Ziel eines Elements – typischerweise einen Tooltip, der beim Darüberfahren oder Fokussieren erscheint. Der Browser übernimmt automatisch die Verzögerung für die Hover-Absicht (300 ms), die Positionierung (mit Anchor Positioning) und das Schließen.

Der Hint-Popover-Modus ist für Popovers im Tooltip-Stil gedacht, die bei „Interest“ erscheinen. Sie sind nicht modal, stehlen den Fokus nicht und werden geschlossen, sobald das Interesse endet. Die Kombination aus interesttarget + popover="hint" ergibt einen nativen Tooltip mit zwei HTML-Attributen.

Native Dialoge übernehmen die Fokusfalle; native Popovers kümmern sich um die Stapelung; native Interest-Invoker übernehmen die Verzögerung für die Hover-Absicht und geben Screenreadern die Beziehungen bekannt. Wenn Sie benutzerdefinierte JS-Implementierungen durch diese deklarativen Grundelemente ersetzen, verbessert sich die Qualität der Barrierefreiheit zuverlässig.

Diese Funktionen werden noch standardisiert. Die genauen Attributnamen und die Befehlsgruppe können sich ändern. Browser-Implementierungen erscheinen zuerst in Chromium. Für den produktiven Einsatz sollten Sie warten, bis sich die Benennung stabilisiert hat und mindestens zwei Browser die Funktionen anbieten – voraussichtlich innerhalb der nächsten ein bis zwei Jahre.

Jede dieser Funktionen ersetzt JavaScript-Code, der millionenfach geschrieben und neu geschrieben wurde: Dialogverwaltung, Popover-Auslöser und Tooltip-Verhalten. Wenn diese Muster in HTML verlagert werden, verringert sich die Seitengröße, die Konsistenz verbessert sich und der Browser kann Optimierungen anwenden.

Die Community-Gruppe Open UI (open-ui.org) treibt einen großen Teil dieser Arbeit voran – sie schlägt neue HTML-Elemente und -Attribute vor, erstellt Prototypen und begleitet sie durch den Standardisierungsprozess. In ihrem Blog finden Sie die neuesten Vorschläge.

command, interesttarget, popover, dialog, Anchor Positioning, View Transitions und anpassbare Selects gehören alle zu einem zusammenhängenden Bestreben, Muster aus Komponentenbibliotheken in die Plattform zu integrieren. Jedes davon ist für sich genommen klein; zusammen stellen sie die größte Erweiterung des HTML-UI-Vokabulars seit Jahren dar.

Verfolgen Sie die Vorschläge (open-ui.org), experimentieren Sie in Chromium mit aktivierten Flags und planen Sie die Einführung, sobald die Funktionen stabiler sind. Prüfen Sie Ihre bestehende Codebasis: Ermitteln Sie, wie viel JS dem Code für Dialoge, Popovers und Tooltips gewidmet ist. Dieser Code ist innerhalb weniger Releases für die Ablösung vorgesehen.

Wozu dient das command-Attribut bei einem Button?

Zwei aufkommende Funktionen erweitern das deklarative UI-Vokabular von HTML: command + commandfor für durch Klick ausgelöste Aktionen (Modal anzeigen, Popover umschalten) und interesttarget + popover="hint" für durch Hover oder Fokus ausgelöste Tooltips. Beide ersetzen gängige JavaScript-Muster durch HTML-Attribute, verbessern die Barrierefreiheit und reduzieren die Bundle-Größe. Die Funktionen werden noch weiterentwickelt. Verfolgen Sie Open UI, um ihre Stabilisierung zu verfolgen, und setzen Sie sie ein, sobald die Browserunterstützung verfügbar ist.