Etykietki narzędzi sprawiają wrażenie najmniejszego problemu z interfejsem użytkownika, jaki możesz mieć. Są malutkie i zwykle ukryte. Kiedy ktoś pyta, jak go zbudować, tradycyjna odpowiedź prawie zawsze odpowiada, używając jakiejś biblioteki JavaScript. I przez długi czas była to rozsądna rada. Ja też to zrobiłem. Z pozoru podpowiedź jest prosta. Najedź kursorem lub skup się na elemencie, pokaż małe okienko z tekstem, a następnie ukryj je, gdy użytkownik się odsunie. Ale kiedy już wyślesz jeden do prawdziwych użytkowników, krawędzie zaczną być widoczne. Użytkownicy klawiatury Wciśnij spust, ale nigdy nie zobaczysz podpowiedzi. Czytniki ekranu ogłaszają to dwukrotnie lub wcale. Etykietka narzędzia miga, gdy poruszasz myszą zbyt szybko. Nakłada się na treść na mniejszych ekranach. Naciśnięcie Esc nie zamyka go. Gubi się ostrość. Z biegiem czasu mój kod podpowiedzi stał się czymś, czego tak naprawdę nie chciałem już posiadać. Nagromadzili się słuchacze zdarzeń. Najechanie kursorem i skupienie wymagały osobnej obsługi. Kliknięcia zewnętrzne wymagały specjalnych przypadków. Atrybuty ARIA musiały być synchronizowane ręcznie. Każda mała poprawka dodała kolejną warstwę logiki. Biblioteki pomogły, ale przypominały raczej czarne skrzynki, nad którymi pracowałem, zamiast w pełni rozumieć, co dzieje się za kulisami. To właśnie skłoniło mnie do przyjrzenia się nowszemu API Popover. Chciałem zobaczyć, co by się stało, gdybym odbudował pojedynczą podpowiedź przy użyciu natywnego modelu przeglądarki bez pomocy biblioteki. Na początek warto zauważyć, że jak w przypadku każdej nowej funkcji, jest w niej kilka rzeczy, nad którymi wciąż pracujemy. To powiedziawszy, obecnie cieszy się doskonałą obsługą przeglądarek, chociaż istnieje kilka elementów ogólnego interfejsu API, które podlegają ciągłym zmianom. Warto w międzyczasie mieć oko na Caniusa. „Stara” podpowiedź Przed interfejsem API Popover korzystanie z biblioteki podpowiedzi nie było skrótem. To było ustawienie domyślne. Przeglądarki nie miały natywnej koncepcji podpowiedzi, która działałaby w przypadku myszy, klawiatury i technologii wspomagających. Jeśli zależało Ci na poprawności, jedyną opcją było skorzystanie z biblioteki i dokładnie to zrobiłem. Na wysokim poziomie wzorzec był zawsze taki sam: element wyzwalający, ukryty element podpowiedzi i JavaScript do koordynacji obu.
Biblioteka obsługiwała okablowanie, które umożliwiało wyświetlanie elementu po najechaniu myszką lub fokusie, ukrywanie po rozmyciu lub opuszczeniu myszy oraz zmianę położenia/rozmiaru podczas przewijania.
Z biegiem czasu podpowiedź może stać się delikatna. Małe zmiany niosły ze sobą ryzyko. Drobne poprawki powodowały regresje. Co gorsza, dodanie nowych podpowiedzi odziedziczyło tę samą złożoność. Technicznie rzecz biorąc, wszystko działało, ale nigdy nie wydawało się ustalone ani kompletne. Taki był stan rzeczy, kiedy zdecydowałem się odbudować podpowiedź przy użyciu natywnego interfejsu API Popover przeglądarki. Moment, w którym wypróbowałem API Popover Nie przerzuciłem się na korzystanie z Popover API, ponieważ chciałem poeksperymentować z czymś nowym. Zmieniłem, ponieważ byłem zmęczony utrzymywaniem zachowania podpowiedzi, które moim zdaniem przeglądarka powinna już zrozumieć. Na początku byłem sceptyczny. Większość nowych internetowych interfejsów API zapewnia prostotę, ale nadal wymaga klejenia, obsługi przypadków brzegowych lub logiki awaryjnej, która po cichu odtwarza tę samą złożoność, której próbowano uniknąć. Wypróbowałem więc API Popover w najmniejszy możliwy sposób. Oto jak to wyglądało:
1. Klawiatura „po prostu działa” Obsługa klawiatury zależała od prawidłowego ułożenia wielu warstw: fokus musiał wywołać podpowiedź, rozmycie musiało to ukryć, klawisz Esc musiał być podłączony ręcznie i liczył się czas. Jeśli pominąłeś jeden przypadek Edge, podpowiedź albo pozostanie otwarta zbyt długo, albo zniknie, zanim będzie można ją przeczytać. Gdy atrybut popover jest ustawiony na auto lub manual, przeglądarka przejmuje podstawowe funkcje: klawisze Tab i Shift+Tab zachowują się normalnie, klawisz Esc zamyka podpowiedź za każdym razem i nie są wymagani dodatkowi słuchacze.
To, co zniknęło z mojej bazy kodu, to globalne procedury obsługi klawiszy, logika czyszczenia specyficzna dla Esc i sprawdzanie stanu podczas nawigacji za pomocą klawiatury. Doświadczenie klawiatury przestało być czymś, o co musiałem dbać, a stało się gwarancją przeglądarki. 2. Przewidywalność czytnika ekranu To byłnajwiększą poprawę. Nawet przy starannej pracy z ARIA zachowanie było różne, jak opisałem wcześniej. Każda mała zmiana wydawała się ryzykowna. Używanie popover z odpowiednią rolą wygląda i wydaje się dużo bardziej stabilne i przewidywalne, jeśli chodzi o to, co się stanie:
A oto kolejna wygrana: po zmianie Lighthouse przestał sygnalizować nieprawidłowe ostrzeżenia o stanie ARIA dla interakcji, głównie dlatego, że nie ma już niestandardowych stanów ARIA, w których mógłbym się przypadkowo pomylić.
3. Zarządzanie ostrością Fokus był kiedyś kruchy. Wcześniej miałem takie zasady: pozwól, aby wyzwalacz fokusu wyświetlał podpowiedź, przenieś fokus do podpowiedzi i nie zamykaj, rozmazuj wyzwalacz, gdy jest zbyt blisko, zamknij podpowiedź i przywróć fokus ręcznie. To działało, dopóki nie zadziałało. Dzięki interfejsowi API Popover przeglądarka wymusza prostszy model, w którym fokus może w bardziej naturalny sposób przenieść się do wyskakującego okienka. Zamknięcie wyskakującego okienka przywraca fokus do spustu i nie ma niewidzialnych pułapek skupienia ani momentów utraty skupienia. I nie dodałem kodu przywracającego fokus; Usunąłem to.
Wniosek Interfejs API Popover oznacza, że podpowiedzi nie są już czymś, co symulujesz. Są czymś, co przeglądarka rozumie. Otwieranie, zamykanie, zachowanie klawiatury, obsługa ucieczki i duża część ułatwień dostępu pochodzą teraz z samej platformy, a nie z doraźnego JavaScript. Nie oznacza to, że biblioteki podpowiedzi są przestarzałe, ponieważ nadal mają sens w przypadku złożonych systemów projektowych, intensywnego dostosowywania lub starszych ograniczeń, ale ustawienie domyślne uległo zmianie. Po raz pierwszy najprostsza podpowiedź może być jednocześnie najbardziej poprawna. Jeśli jesteś ciekawy, wypróbuj ten eksperyment: po prostu zamień tylko jedną podpowiedź w swoim produkcie na Popover API, nie przepisz wszystkiego, nie migruj całego systemu, po prostu wybierz jedną i zobacz, co zniknie z Twojego kodu. Gdy platforma oferuje lepszy prymityw, wygraną nie jest tylko mniejsza liczba wierszy JavaScriptu, ale mniejsza liczba rzeczy, którymi musisz się w ogóle martwić. Sprawdź pełny kod źródłowy w moim repozytorium GitHub. Dalsze czytanie Aby głębiej zagłębić się w popover i powiązane interfejsy API:
„Poppin’ In”, Geoff Graham „Wyjaśnienie związku między wyskakującymi okienkami a oknami dialogowymi”, Zell Liew „Co to jest popover=podpowiedź?”, Una Kravets „Rozkazy wywołujące”, Daniel Schwarz „Tworzenie powiadomienia o automatycznym zamknięciu za pomocą wyskakującego okienka HTML”, Preethi Otwórz objaśnienie interfejsu API Popover interfejsu użytkownika „Przebijaj balony”, John Rhea „Umiejscowienie kotwicy CSS”, Juan Diego Rodríguez
MDN oferuje również obszerną dokumentację techniczną Popover API.
