Objašnjenje izgleda kao najmanji problem korisničkog sučelja koji možete imati. Sitne su i obično skrivene. Kada neko pita kako da ga napravi, tradicionalni odgovor se skoro uvek vraća korišćenjem neke JavaScript biblioteke. I dugo je to bio razuman savjet. I ja sam to pratio. Na površini, opis alata je jednostavan. Zadržite pokazivač miša ili se fokusirajte na element, pokažite mali okvir s nekim tekstom, a zatim ga sakrijte kada se korisnik udalji. Ali kada jedan pošaljete pravim korisnicima, ivice počinju da se vide. Korisnici tastature Tabulatorom na okidač, ali nikada ne vide opis alata. Čitači ekrana to najavljuju dvaput, ili ne najavljuju uopće. Objašnjenje treperi kada prebrzo pomerate miš. Preklapa sadržaj na manjim ekranima. Pritiskom na Esc se ne zatvara. Fokus se gubi. Vremenom je moj alatni kod prerastao u nešto što zapravo više nisam želio posjedovati. Slušatelji događaja su se nakupili. Lebdenjem i fokusom se moralo upravljati odvojeno. Vanjski klikovi potrebni su posebni slučajevi. ARIA atributi su morali biti ručno sinhronizovani. Svaki mali popravak je dodao još jedan sloj logike. Biblioteke su pomogle, ali su bile više kao crne kutije oko kojih sam radio umjesto da potpuno razumijem šta se dešava iza kulisa. To me je nagnalo da pogledam noviji Popover API. Želeo sam da vidim šta bi se desilo ako bih ponovo napravio jedan tooltip koristeći izvorni model pretraživača bez pomoći biblioteke. Kad počnemo, vrijedno je napomenuti da, kao i kod svake nove funkcije, postoje neke stvari koje se još uvijek izglađuju. Ipak, trenutno uživa odličnu podršku pretraživača, iako postoji nekoliko dijelova ukupnog API-ja koji su u toku. Vrijedi pripaziti na Caniusea u međuvremenu. “Stari” Tooltip Prije Popover API-ja, korištenje biblioteke opisa alata nije bila prečica. To je bilo podrazumevano. Preglednici nisu imali izvorni koncept opisa alata koji je funkcionirao preko miša, tastature i pomoćne tehnologije. Ako vam je stalo do ispravnosti, jedina opcija vam je bila da koristite biblioteku, a ja sam upravo to i uradio. Na visokom nivou, obrazac je uvijek bio isti: element okidača, skriveni element opisa alata i JavaScript za koordinaciju to dvoje.
Biblioteka je upravljala ožičenjem koje je omogućilo elementu da se prikaže pri lebdenju ili fokusu, da se sakrije pri zamućenju ili napuštanju miša, te da promijeni položaj/promjenu veličine pri pomicanju.
S vremenom bi opis alata mogao postati krhak. Male promjene su nosile rizik. Manje popravke uzrokovale su regresije. Što je još gore, dodavanje novih opisa alata naslijedilo je istu složenost. Stvari su tehnički funkcionirale, ali nikada se nisu osjećale sređeno ili završeno. Takvo je bilo stanje kada sam odlučio da ponovo napravim opis alata koristeći izvorni Popover API pretraživača. Trenutak kada sam isprobao Popover API Nisam se prebacio na korištenje Popover API-ja jer sam želio eksperimentirati s nečim novim. Prebacio sam se jer sam bio umoran od održavanja ponašanja u opisu alata za koje sam vjerovao da je pretraživač već trebao razumjeti. U početku sam bio skeptičan. Većina novih web API-ja obećavaju jednostavnost, ali i dalje zahtijevaju ljepilo, rukovanje rubnim slučajevima ili rezervnu logiku koja tiho rekreira istu složenost od koje ste pokušavali pobjeći. Dakle, isprobao sam Popover API na najmanji mogući način. Evo kako je to izgledalo:
1. Tastatura "samo radi" Podrška za tastaturu zavisila je od višestrukih slojeva koji su se pravilno postavili: fokus je morao da pokrene opis alata, zamućenje je moralo da ga sakrije, Esc je morao da se poveže ručno, a tajming je bio važan. Ako ste propustili jedan rubni slučaj, opis alata bi ili ostao otvoren predugo ili nestao prije nego što bi se mogao pročitati. Sa atributom popover postavljenim na automatski ili ručno, pretraživač preuzima osnove: Tab i Shift+Tab se ponašaju normalno, Esc zatvara opis alata svaki put i nisu potrebni dodatni slušaoci.
Ono što je nestalo iz moje baze kodova bili su globalni rukovaoci skidanja tipki, logika čišćenja specifična za Esc i provjere stanja tokom navigacije pomoću tastature. Iskustvo sa tastaturom je prestalo da bude nešto što sam morao da održavam i postalo je garancija pretraživača. 2. Predvidljivost čitača ekrana Ovo je bilonajveće poboljšanje. Čak i uz pažljiv rad ARIA-e, ponašanje je variralo, kao što sam ranije naveo. Svaka mala promjena je bila rizična. Korištenje popovera s odgovarajućom ulogom izgleda i djeluje mnogo stabilnije i predvidljivije što se tiče onoga što će se dogoditi:
I evo još jedne pobjede: nakon prebacivanja, Lighthouse je prestao označavati pogrešna upozorenja o stanju ARIA za interakciju, uglavnom zato što više ne postoje prilagođena ARIA stanja koja mogu slučajno pogriješiti.
3. Upravljanje fokusom Fokus je nekada bio krhak. Prije sam imao pravila kao što su: neka fokus okidač pokaže opis alata, pomjeri fokus u opis alata i ne zatvaraj, zamuti okidač kada je preblizu i zatvori opis alata i vrati fokus ručno. Ovo je funkcioniralo sve dok nije. Sa Popover API-jem, pretraživač nameće jednostavniji model gde fokus može prirodnije da se pomeri u skočni prozor. Zatvaranje iskačućeg ekrana 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 pretraživač razume. Otvaranje, zatvaranje, ponašanje tipkovnice, rukovanje Escape-om i veliki dio pristupačnosti sada dolaze iz same platforme, a ne iz ad-hoc JavaScript-a. To ne znači da su biblioteke opisa alata zastarjele jer i dalje imaju smisla za složene sisteme dizajna, teška prilagođavanja ili naslijeđena ograničenja, ali je zadana vrijednost promijenjena. Po prvi put, najjednostavniji tooltip može biti i najispravniji. Ako ste radoznali, pokušajte sa ovim eksperimentom: jednostavno zamijenite samo jedan opis alata u svom proizvodu Popover API-jem, nemojte sve prepisivati, nemojte migrirati cijeli sistem i samo odaberite jedan i vidite šta nestaje iz vašeg koda. Kada vam platforma pruži bolji primitiv, pobjeda nije samo manje redova JavaScript-a, već je to manje stvari o kojima uopće morate brinuti. Pogledajte cijeli izvorni kod u mom GitHub repo-u. Dalje čitanje Za dublje uronjenje u iskačuće i povezane API-je:
"Poppin' In", Geoff Graham “Rasjašnjavanje odnosa između iskakanja i dijaloga”, Zell Liew “Šta je popover=hint?”, Una Kravets “Invoker Commands”, Daniel Schwarz “Kreiranje obavještenja o automatskom zatvaranju s HTML iskačućim prozorom”, Preethi Otvorite UI Popover API Explainer “Pop(over) the Balloons”, John Rhea “CSS Anchor Positioning”, Juan Diego Rodríguez
MDN takođe nudi sveobuhvatnu tehničku dokumentaciju za Popover API.
