Opisi se čine kao najmanji problem korisničkog sučelja koji možete imati. Sićušni su i obično skriveni. Kad netko pita kako ga izgraditi, tradicionalni odgovor gotovo uvijek dolazi uz korištenje neke JavaScript biblioteke. I dugo je to bio razuman savjet. I ja sam to pratio. Na površini, opis je jednostavan. Zadržite pokazivač ili se fokusirajte na element, pokažite mali okvir s tekstom, a zatim ga sakrijte kada se korisnik odmakne. Ali nakon što ga pošaljete stvarnim korisnicima, rubovi se počinju vidjeti. Korisnici tipkovnice Tab u okidač, ali nikada ne vidite tooltip. Čitači zaslona to najavljuju dva puta ili uopće ne. Opis alata treperi kada prebrzo pomičete miš. Preklapa sadržaj na manjim ekranima. Pritiskom na Esc ne zatvara se. Fokus se gubi. S vremenom je moj kôd alata prerastao u nešto što zapravo više nisam želio posjedovati. Slušatelji događaja su se gomilali. Hover i fokus morali su se rješavati odvojeno. Za vanjske klikove potrebni su posebni slučajevi. ARIA atributi morali su se sinkronizirati ručno. Svaki mali popravak dodao je još jedan sloj logike. Knjižnice su pomogle, ali bile su više poput crnih kutija oko kojih sam radio umjesto da u potpunosti razumijem što se događa iza kulisa. To me je potaknulo da pogledam noviji Popover API. Htio sam vidjeti što bi se dogodilo ako ponovno izgradim jedan alatni opis koristeći nativni model preglednika bez pomoći biblioteke. Na početku je vrijedno napomenuti da, kao i sa svakom novom značajkom, postoje neke stvari koje se još uvijek ispravljaju. Ipak, trenutačno uživa odličnu podršku preglednika, iako postoji nekoliko dijelova cjelokupnog API-ja koji se mijenjaju. U međuvremenu vrijedi pripaziti na Caniusea. "Stari" opis alata Prije Popover API-ja korištenje biblioteke alatnih opisa nije bilo prečac. To je bilo zadano. Preglednici nisu imali izvorni koncept alatnog opisa koji bi funkcionirao preko miša, tipkovnice i pomoćne tehnologije. Ako vam je stalo do ispravnosti, jedina opcija bila vam je korištenje biblioteke, a ja sam upravo to učinio. Na visokoj razini, obrazac je uvijek bio isti: element okidača, skriveni element opisa alata i JavaScript za koordinaciju to dvoje.
Knjižnica je upravljala ožičenjem koje je omogućilo elementu da se prikaže pri lebdenju ili fokusu, sakrije pri zamućenju ili napuštanju miša i promijeni položaj/veličinu pri pomicanju.
S vremenom bi opis alata mogao postati krhak. Male promjene nosile su rizik. Manji popravci uzrokovali su regresije. Još gore, dodavanje novih opisa alata naslijedilo je istu složenost. Stvari su tehnički funkcionirale, ali nikad se nisu činile sređenima ili potpunima. To je bilo stanje stvari kada sam odlučio ponovno izgraditi opis alata koristeći nativni Popover API preglednika. Trenutak kad sam isprobao Popover API Nisam se prebacio na Popover API jer sam želio eksperimentirati s nečim novim. Prebacio sam se jer sam bio umoran od održavanja ponašanja opisa alata za koje sam vjerovao da je preglednik već trebao razumjeti. U početku sam bio skeptičan. Većina novih web API-ja obećava jednostavnost, ali i dalje zahtijeva ljepilo, rukovanje rubnim slučajevima ili zamjensku logiku koja tiho rekreira istu složenost kojoj ste pokušavali pobjeći. Dakle, isprobao sam Popover API na najmanji mogući način. Evo kako je to izgledalo:
1. Tipkovnica "jednostavno radi" Podrška za tipkovnicu ovisila je o višestrukim slojevima koji su pravilno poredani: fokus je morao pokrenuti opis alata, zamućenje ga je moralo sakriti, Esc je morao biti ožičen ručno, a vrijeme je bilo važno. Ako ste propustili jedan rubni slučaj, opis alata bi ili ostao otvoren predugo ili nestao prije nego što bi se mogao pročitati. S popover atributom postavljenim na auto ili manualno, preglednik preuzima osnove: Tab i Shift+Tab ponašaju se normalno, Esc zatvara opis alata svaki put i nisu potrebni dodatni slušatelji.
Ono što je nestalo iz moje baze kodova bili su globalni rukovatelji pritiskom tipke, logika čišćenja specifična za Esc i provjere stanja tijekom navigacije tipkovnicom. Iskustvo s tipkovnicom prestalo je biti nešto što sam morao održavati i postalo je jamstvo preglednika. 2. Predvidljivost čitača zaslona Ovo je bionajveći napredak. Čak i uz pažljiv rad ARIA-e, ponašanje je variralo, kao što sam ranije naveo. Svaka mala promjena bila je riskantna. Korištenje popover-a s odgovarajućom ulogom izgleda i čini se puno stabilnijim i predvidljivijim što se tiče onoga što će se dogoditi:
I evo još jedne pobjede: nakon promjene, Lighthouse je prestao označavati netočna upozorenja o ARIA stanju za interakciju, uglavnom zato što više nema prilagođenih ARIA stanja za koja bih slučajno pogriješio.
3. Upravljanje fokusom Fokus je nekad bio krhak. Prije sam imao pravila kao što su: pusti okidač fokusa da prikaže opis alata, premjesti fokus na opis alata i ne zatvaraj, zamuti okidač kada je preblizu i zatvori opis alata i ručno vrati fokus. Ovo je funkcioniralo dok nije. Uz Popover API, preglednik nameće jednostavniji model gdje se fokus može prirodnije pomaknuti u popover. Zatvaranje skočnog okvira vraća fokus na okidač i nema nevidljivih zamki fokusa ili izgubljenih trenutaka fokusa. I nisam dodao kod za vraćanje fokusa; Uklonio sam ga.
Zaključak Popover API znači da opisi više nisu nešto što simulirate. Oni su nešto što preglednik razumije. Otvaranje, zatvaranje, ponašanje tipkovnice, rukovanje Escape-om i veliki dio pristupačnosti sada dolaze od same platforme, a ne od ad-hoc JavaScripta. To ne znači da su knjižnice s opisima alata zastarjele jer još uvijek imaju smisla za složene sustave dizajna, teške prilagodbe ili naslijeđena ograničenja, ali zadana se vrijednost promijenila. Po prvi put, najjednostavniji tooltip može biti i najispravniji. Ako ste znatiželjni, isprobajte ovaj eksperiment: jednostavno zamijenite samo jedan opis alata u svom proizvodu s Popover API-jem, nemojte prepisivati sve, nemojte migrirati cijeli sustav, a samo odaberite jedan i pogledajte što će nestati iz vašeg koda. Kada vam platforma daje bolju primitivu, dobit nije samo manje redaka JavaScripta, već manje stvari o kojima uopće morate brinuti. Provjerite cijeli izvorni kod u mom GitHub repou. Daljnje čitanje Za dublje poniranje u skočne prozore i povezane API-je:
“Poppin’ In”, Geoff Graham “Razjašnjenje odnosa između skočnih prozora i dijaloga”, Zell Liew “Što je popover=hint?”, Una Kravets “Naredbe invokera”, Daniel Schwarz “Stvaranje obavijesti o automatskom zatvaranju s HTML skočnim prozorom”, Preethi Otvorite UI Popover API Explainer “Pop(over) the Balloons”, John Rhea “Pozicioniranje CSS sidra”, Juan Diego Rodríguez
MDN također nudi sveobuhvatnu tehničku dokumentaciju za Popover API.
