Interest Invokers i atrybut command

Grupa Open UI standaryzuje dwa nowe atrybuty HTML — command do działań wywoływanych kliknięciem oraz interesttarget do „zainteresowania” wywoływanego najechaniem lub przeniesieniem fokusu (to podstawa podpowiedzi i podglądów). Oba rozszerzają HTML o deklaratywne zachowania, które tradycyjnie wymagały JavaScriptu.

Przycisk z atrybutami command="show-modal" i commandfor="dialog-id" wyświetla okno dialogowe bez użycia JS — zastępując ręczne wywołania dialog.showModal(). Inne polecenia to: command="close", command="toggle-popover", command="show-popover".

Początkowy zestaw obejmuje typowe wzorce interfejsu: wyświetlanie i ukrywanie okien dialogowych (wbudowany element <dialog>), przełączanie popoverów (Popover API), a z czasem może się rozszerzać. Elementy niestandardowe mogą deklarować, które polecenia akceptują, za pomocą procedur obsługi zdarzeń oncommand.

Oprócz wbudowanych poleceń specyfikacja pozwala używać niestandardowych ciągów poleceń zaczynających się od „--”. Element docelowy otrzymuje zdarzenie command, które można obsłużyć w JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

Atrybut interesttarget wskazuje element docelowy zainteresowania — zazwyczaj podpowiedź pojawiającą się po najechaniu lub przeniesieniu fokusu. Przeglądarka automatycznie obsługuje czas reakcji (300 ms opóźnienia dla intencji najechania), pozycjonowanie (za pomocą anchor positioning) i zamykanie.

Tryb podpowiedzi popover jest przeznaczony dla popoverów w stylu podpowiedzi, które pojawiają się po wzbudzeniu zainteresowania. Nie są modalne, nie przejmują fokusu i zamykają się, gdy zainteresowanie znika. Połączenie interesttarget + popover="hint" zapewnia natywną podpowiedź za pomocą dwóch atrybutów HTML.

Natywne okna dialogowe obsługują przechwytywanie fokusu, natywne popovery obsługują kolejność nakładania, a natywne wywoływanie przez interest obsługuje czas reakcji na zamiar najechania i przekazuje relacje czytnikom ekranowym. Zastąpienie niestandardowych implementacji JS tymi deklaratywnymi elementami niezawodnie poprawia dostępność.

Te funkcje są nadal standaryzowane. Dokładne nazwy atrybutów i zestaw poleceń mogą się zmienić. Implementacje przeglądarek pojawiają się najpierw w Chromium. Z użyciem produkcyjnym należy poczekać do ustabilizowania nazewnictwa i udostępnienia funkcji w co najmniej dwóch przeglądarkach — prawdopodobnie nastąpi to w ciągu najbliższego roku lub dwóch lat.

Każda z tych funkcji zastępuje kod JavaScript pisany i przepisywany miliony razy: zarządzanie oknami dialogowymi, wyzwalacze popoverów i zachowanie podpowiedzi. Przeniesienie tych wzorców do HTML zmniejsza rozmiar strony, poprawia spójność i pozwala przeglądarce stosować optymalizacje.

Grupa społecznościowa Open UI (open-ui.org) napędza znaczną część tych prac — proponuje nowe elementy i atrybuty HTML, tworzy ich prototypy oraz pomaga przeprowadzić je przez proces standaryzacji. Najnowszych propozycji należy szukać na jej blogu.

command, interesttarget, popover, dialog, anchor positioning, view transitions i customizable selects są częścią jednego spójnego dążenia do przeniesienia wzorców z bibliotek komponentów bezpośrednio do platformy. Każda z tych funkcji z osobna jest niewielka, ale razem stanowią największe od lat rozszerzenie słownika interfejsu HTML.

Należy śledzić propozycje (open-ui.org), eksperymentować w Chromium z włączonymi flagami i planować wdrożenie funkcji w miarę ich stabilizowania. Warto przeprowadzić audyt istniejącej bazy kodu: sprawdzić, ile kodu JS służy do obsługi okien dialogowych, popoverów i podpowiedzi. Ten kod ma zostać zastąpiony w ciągu kilku kolejnych wydań.

Do czego służy atrybut command na przycisku?

Dwie nowe funkcje rozszerzają deklaratywny słownik interfejsu HTML: command + commandfor służą do działań wywoływanych kliknięciem (wyświetlania okna modalnego, przełączania popovera), a interesttarget + popover="hint" do podpowiedzi wywoływanych najechaniem lub przeniesieniem fokusu. Obie zastępują typowe wzorce JavaScriptu atrybutami HTML, poprawiając dostępność i zmniejszając rozmiar pakietu. Nadal ewoluują — warto śledzić Open UI pod kątem stabilizacji i wdrażać je wraz z pojawianiem się obsługi w przeglądarkach.