Tresna-informazioek izan dezakezun UI arazo txikiena dirudi. Txikiak dira eta normalean ezkutuan daude. Norbaitek bat nola eraiki galdetzen duenean, erantzun tradizionala ia beti itzultzen da JavaScript liburutegiren bat erabiliz. Eta denbora luzez, hori izan zen zentzuzko aholkua. Nik ere jarraitu nuen. Azalean, tresna-informazioa erraza da. Pasatu gainean edo fokatu elementu batean, erakutsi laukitxo bat testu batekin, eta ezkutatu erabiltzailea urruntzen denean. Baina benetako erabiltzaileei bat bidaltzen diezunean, ertzak erakusten hasten dira. Teklatuaren erabiltzaileek sakatu abiarazlean, baina inoiz ez dute tresna-informazioa ikusten. Pantaila-irakurleek bi aldiz iragartzen dute, edo batere ez. Erreminta-informazioa keinu egiten da sagua azkarregi mugitzen duzunean. Pantaila txikiagoetako edukia gainjartzen du. Esc sakatuta ez da ixten. Fokua galtzen da. Denborak aurrera egin ahala, nire tresna-informazio kodea jada jabetu nahi ez nuen zerbait bihurtu zen. Ekitaldi entzuleak pilatuta. Pasatzea eta fokatzea bereiz kudeatu behar izan ziren. Kanpoko klikek kasu bereziak behar zituzten. ARIA atributuak eskuz sinkronizatuta mantendu behar ziren. Konponketa txiki bakoitzak beste logika geruza bat gehitzen zuen. Liburutegiek lagundu zuten, baina agertoki atzean gertatzen ari zena guztiz ulertu beharrean lantzen nituen kutxa beltzen antzekoak ziren. Hori izan zen Popover API berrira begiratzera bultzatu ninduena. Liburutegi baten laguntzarik gabe arakatzailearen jatorrizko eredua erabiliz tresna-informazio bakarra berreraikitzen banu zer gertatuko litzatekeen ikusi nahi nuen. Hasten garen heinean, azpimarratzekoa da, edozein ezaugarri berrirekin bezala, oraindik ere lisatzen ari diren gauza batzuk daudela. Hori bai, gaur egun arakatzaileen laguntza bikaina du, nahiz eta API orokorrean dauden hainbat pieza martxan dauden. Bitartean Caniuseri begira egoteak merezi du. "Zaharra" tresna-informazioa Popover APIaren aurretik, tresna-informazioen liburutegia erabiltzea ez zen lasterbide bat. Lehenetsia zen. Arakatzaileek ez zuten sagua, teklatua eta laguntza-teknologietan funtzionatzen zuen tresna-informazio baten jatorrizko kontzepturik. Zuzentasuna axola bazaizu, zure aukera bakarra liburutegia erabiltzea zen, eta horixe da nik egin nuena. Maila altuan, eredua beti berdina zen: abiarazle-elementua, ezkutuko tresna-informazio-elementua eta JavaScript biak koordinatzeko.
Liburutegiak elementua pasatzean edo fokuan erakusteko aukera ematen zuen kableatuak kudeatzen zituen, lausotzean edo sagua uztean ezkutatu eta korritzean posizioa/tamaina aldatzea.
Denborarekin, tresna-informazioa hauskorra izan daiteke. Aldaketa txikiek arriskua ekarri zuten. Konponketa txikiek erregresioak eragin zituzten. Okerrago, tresna-aholku berriak gehitzeak konplexutasun bera heredatu zuen. Gauzak teknikoki funtzionatu zuten, baina ez ziren inoiz finkatu edo osaturik sentitu. Gauzak horrela, tresna-informazioa berreraikitzea erabaki nuen arakatzailearen jatorrizko Popover APIa erabiliz. Popover APIa probatu nuen momentua Ez nintzen Popover APIa erabiltzera aldatu zerbait berri batekin esperimentatu nahi nuelako. Nabigatzaileak jada ulertu behar zuela uste nuen tresna-informazioaren portaera mantentzeaz nekatuta nengoelako aldatu nuen. Hasieran eszeptikoa nintzen. Web API berri gehienek sinpletasuna agintzen dute, baina hala ere, ihes egiten saiatzen ari zinen konplexutasun bera isil-isilik birsortzen duen kola, ertz-kasuen maneiua edo ihesbide-logika behar dute. Beraz, Popover APIa ahalik eta modurik txikienean probatu nuen. Hona hemen nolakoa den:
-rekin konexioa sortzen du
1. Teklatua "Just Works" Teklatuaren euskarria geruza anitzak behar bezala lerrokatzen ziren: fokuak tresna-informazioa piztu behar zuen, lausotzea ezkutatu behar zen, Esc eskuz kableatu behar zen eta denborak garrantzia zuen. Ertz-kasu bat galduko bazenu, tresna-informazioa luzeegi egongo litzateke zabalik edo desagertu egingo litzateke irakurri aurretik. Popover atributua automatikoki edo eskuzko moduan ezarrita, arakatzaileak oinarrizkoak hartzen ditu: Tab eta Shift+Tab normaltasunez jokatzen dute, Esc-ek tresna-informazioa ixten du aldi bakoitzean eta ez da entzule gehigarririk behar.
Nire kode-oinarritik desagertu zena teklatu-kudeatzaile globalak, Esc-en berariazko garbiketa-logika eta teklatuaren nabigazioan egoera-egiaztapenak izan ziren. Teklatuaren esperientzia mantendu behar nuen zerbait izateari utzi zion eta arakatzailearen berme bihurtu zen. 2. Pantaila-irakurlearen aurreikuspena Hau zenhobekuntzarik handiena. ARIA kontu handiz lan eginda ere, jokabidea aldatu egin zen, lehen azaldu dudan bezala. Aldaketa txiki bakoitza arriskutsua sentitzen zen. Rol egokia duen popover bat erabiltzeak askoz egonkorrago eta aurreikusgarriagoa da gertatuko denaren arabera:
Eta hona hemen beste garaipen bat: aldaketaren ondoren, Lighthousek interakziorako ARIA egoera okerreko abisuak markatzeari utzi zion, neurri handi batean, jada ez daudelako ustekabean oker egiteko ARIA egoera pertsonalizatuak.
3. Fokuen kudeaketa Fokua hauskorra izaten zen. Aurretik, honako arauak nituen: utzi foku-abiarazlea argibide-informazioa erakusten, fokua mugitu argibidera eta ez itxi, lausotu abiarazlea gertuegi dagoenean eta itxi tresna-aholkua eta leheneratu fokua eskuz. Honek funtzionatu zuen ez arte. Popover APIarekin, arakatzaileak eredu sinpleago bat ezartzen du, non fokua modu naturalean mugi daitekeen popoverra. Popover-a ixteak fokua abiarazleari itzultzen dio, eta ez dago fokatze-tranpa ikustezin edo galdutako foku-unerik. Eta ez nuen fokua berreskuratzeko kodea gehitu; kendu nuen.
Ondorioa Popover APIak esan nahi du tresna-informazioak jada ez direla simulatzen duzun zerbait. Arakatzaileak ulertzen dituen zerbait dira. Irekitzea, ixtea, teklatuaren portaera, Escape maneiatzea eta irisgarritasun zati handi bat plataformatik bertatik datoz orain, ez ad-hoc JavaScriptetik. Horrek ez du esan nahi tresna-liburutegiak zaharkituta daudenik, diseinu-sistema konplexuetarako, pertsonalizazio astunetarako edo ondare-murriztapenetarako zentzua dutelako oraindik, baina lehenetsia aldatu egin da. Lehen aldiz, tresna-aholkurik errazena ere izan daiteke zuzenena. Jakin-mina baduzu, probatu esperimentu hau: ordezkatu zure produktuko tresna-informazio bakarra Popover APIarekin, ez berridatzi dena, ez migratu sistema osoa eta aukeratu bat eta ikusi zer desagertzen den zure kodean. Plataformak primitibo hobea ematen dizunean, irabazia ez da JavaScript lerro gutxiago izatea, baizik eta kezkatu behar duzun gauza gutxiago da. Begiratu iturburu-kode osoa nire GitHub-en. Irakurketa gehiago Popovers eta erlazionatutako APIetan sakontzeko:
"Poppin' In", Geoff Graham "Popovers eta Dialogs arteko erlazioa argitzea", Zell Liew "Zer da popover=iradokizuna?", Una Kravets "Invoker Aginduak", Daniel Schwarz "Itxiera automatikoko jakinarazpen bat sortzea HTML popover batekin", Preethi Ireki UI Popover APIaren azalpena "Pop(over) the Balloons", John Rhea “CSS Anchor Positioning”, Juan Diego Rodríguez
MDN-k Popover APIrako dokumentazio tekniko osoa ere eskaintzen du.
