Подсказките изглеждат като най-малкия проблем с потребителския интерфейс, който можете да имате. Те са малки и обикновено скрити. Когато някой попита как да създаде такъв, традиционният отговор почти винаги се връща с помощта на някаква JavaScript библиотека. И дълго време това беше разумният съвет. И аз го последвах. На пръв поглед подсказката е проста. Задръжте курсора на мишката или фокусирайте върху елемент, покажете малко поле с някакъв текст, след което го скрийте, когато потребителят се отдалечи. Но след като изпратите такъв на реални потребители, ръбовете започват да се показват. Потребителите на клавиатурата Tab в тригера, но никога не виждат подсказката. Екранните четци го съобщават два пъти или изобщо не го съобщават. Подсказката мига, когато движите мишката твърде бързо. Припокрива съдържание на по-малки екрани. Натискането на Esc не го затваря. Фокусът се губи. С течение на времето кодът ми с подсказки се превърна в нещо, което наистина не исках да притежавам повече. Слушателите на събитието се натрупаха. Ховърът и фокусът трябваше да се обработват отделно. Външните кликвания изискват специални случаи. Атрибутите на ARIA трябваше да се поддържат синхронизирани ръчно. Всяка малка поправка добавяше нов слой логика. Библиотеките помогнаха, но те също бяха по-скоро като черни кутии, около които работех, вместо да разбирам напълно какво се случва зад кулисите. Това ме накара да разгледам по-новия Popover API. Исках да видя какво ще се случи, ако възстановя една подсказка, използвайки родния модел на браузъра без помощта на библиотека. Като започнем, струва си да се отбележи, че както при всяка нова функция, има някои неща, които все още се изглаждат. Това каза, че в момента се радва на страхотна поддръжка на браузъра, въпреки че има няколко части от цялостния API, които се променят. Междувременно си струва да следите Caniuse. „Старата“ подсказка Преди Popover API използването на библиотека с подсказки не беше пряк път. Беше по подразбиране. Браузърите нямаха собствена концепция за подсказка, която да работи с мишка, клавиатура и помощна технология. Ако се интересувате от коректността, единствената ви възможност беше да използвате библиотека и точно това направих. На високо ниво моделът винаги беше един и същ: задействащ елемент, скрит елемент с подсказка и JavaScript за координиране на двете.
Библиотеката управляваше окабеляването, което позволяваше на елемента да се показва при задържане или фокусиране, скриване при замъгляване или напускане на мишката и преместване/преоразмеряване при превъртане.
С течение на времето подсказката може да стане крехка. Малките промени носеха риск. Незначителните поправки причиниха регресии. Още по-лошо, добавянето на нови подсказки наследи същата сложност. Нещата технически работеха, но никога не се чувстваха уредени или завършени. Това беше състоянието на нещата, когато реших да възстановя подсказката, използвайки собствения Popover API на браузъра. Моментът, в който изпробвах Popover API Не преминах към използване на Popover API, защото исках да експериментирам с нещо ново. Превключих, защото ми беше омръзнало да поддържам поведение на подсказка, което вярвах, че браузърът вече трябва да е разбрал. В началото бях скептичен. Повечето нови уеб приложни програмни интерфейси (API) обещават простота, но все още изискват лепило, обработка на крайния случай или резервна логика, която тихо пресъздава същата сложност, от която се опитвате да избягате. И така, изпробвах Popover API по възможно най-малкия начин. Ето как изглеждаше това:
1. Клавиатурата „Просто работи“ Поддръжката на клавиатурата зависеше от правилното подреждане на множество слоеве: фокусът трябваше да задейства подсказката, замъгляването трябваше да го скрие, Esc трябваше да бъде свързан ръчно и времето имаше значение. Ако сте пропуснали един краен случай, подсказката или ще остане отворена твърде дълго, или ще изчезне, преди да може да бъде прочетена. С атрибута popover, зададен на auto или manual, браузърът поема основите: Tab и Shift+Tab се държат нормално, Esc затваря подсказката всеки път и не са необходими допълнителни слушатели.
Това, което изчезна от моята кодова база, бяха манипулатори за глобално натискане на клавиши, специфична за Esc логика за почистване и проверки на състоянието по време на навигация с клавиатура. Работата с клавиатурата престана да бъде нещо, което трябваше да поддържам, и се превърна в гаранция за браузъра. 2. Предсказуемост на екранния четец Това бешенай-голямото подобрение. Дори при внимателна работа на ARIA, поведението варираше, както очертах по-рано. Всяка малка промяна изглеждаше рискована. Използването на popover с подходяща роля изглежда и се чувства много по-стабилно и предвидимо по отношение на това какво ще се случи:
И ето още една победа: след превключването, Lighthouse спря да маркира неправилни предупреждения за състояние на ARIA за взаимодействието, до голяма степен защото вече няма персонализирани състояния на ARIA, които случайно да объркам.
3. Управление на фокуса Фокусът беше крехък. Преди имах правила като: оставяне на тригера за фокусиране да показва подсказка, преместване на фокуса в подсказка и не затваряне, замъгляване на тригера, когато е твърде близо, затваряне на подсказка и възстановяване на фокуса ръчно. Това работеше, докато не свърши. С Popover API, браузърът налага по-опростен модел, при който фокусът може по-естествено да се премести в popover. Затварянето на изскачащия прозорец връща фокуса към спусъка и няма невидими прихващания на фокуса или изгубени моменти на фокусиране. И не добавих код за възстановяване на фокуса; Премахнах го.
Заключение Popover API означава, че подсказките вече не са нещо, което симулирате. Те са нещо, което браузърът разбира. Отварянето, затварянето, поведението на клавиатурата, обработката на Escape и голяма част от достъпността вече идват от самата платформа, а не от ad-hoc JavaScript. Това не означава, че библиотеките с подсказки са остарели, защото все още имат смисъл за сложни системи за проектиране, тежко персонализиране или наследени ограничения, но по подразбиране се промени. За първи път най-простата подсказка може да бъде и най-правилната. Ако сте любопитни, опитайте този експеримент: просто заменете само една подсказка във вашия продукт с Popover API, не пренаписвайте всичко, не мигрирайте цяла система, а просто изберете една и вижте какво изчезва от вашия код. Когато платформата ви даде по-добър примитив, печалбата не е само по-малко редове на JavaScript, но това са по-малко неща, за които изобщо трябва да се тревожите. Вижте пълния изходен код в моето хранилище на GitHub. Допълнително четене За по-задълбочени гмуркания в изскачащите екрани и свързаните API:
“Poppin’ In”, Джеф Греъм „Изясняване на връзката между изскачащи прозорци и диалози“, Зел Лию „Какво е popover=hint?“, Уна Кравец „Команди на Invoker“, Даниел Шварц „Създаване на известие за автоматично затваряне с HTML Popover“, Preethi Отворете UI Popover API Explainer „Пукане на балоните“, Джон Риа „CSS Anchor Positioning“, Хуан Диего Родригес
MDN също предлага изчерпателна техническа документация за Popover API.
