ინსტრუმენტების მინიშნებები იგრძნობა როგორც ყველაზე პატარა UI პრობლემა, რაც შეიძლება გქონდეთ. ისინი პაწაწინა და ჩვეულებრივ დამალულია. როდესაც ვინმეს ეკითხება, როგორ ავაშენოთ ის, ტრადიციული პასუხი თითქმის ყოველთვის ბრუნდება JavaScript ბიბლიოთეკის გამოყენებით. და დიდი ხნის განმავლობაში ეს იყო გონივრული რჩევა. მეც გავყევი. გარეგნულად, ინსტრუმენტი მარტივია. გადაიტანეთ ან ფოკუსირება ელემენტზე, აჩვენეთ პატარა ყუთი ტექსტით, შემდეგ დამალეთ, როდესაც მომხმარებელი შორდება. მაგრამ როგორც კი ერთს ნამდვილ მომხმარებლებს გაუგზავნით, კიდეები გამოჩნდება. კლავიატურის მომხმარებლები ჩასვით ტრიგერში, მაგრამ არასოდეს დაინახავთ ხელსაწყოს მინიშნებას. ეკრანის მკითხველები ამას ორჯერ ან საერთოდ არ აცხადებენ. ხელსაწყოს მინიშნება ციმციმებს, როცა მაუსის ძალიან სწრაფად მოძრაობთ. ის გადაფარავს შინაარსს პატარა ეკრანებზე. Esc-ის დაჭერით არ იხურება. ფოკუსი იკარგება. დროთა განმავლობაში, ჩემი ინსტრუმენტების კოდი გადაიზარდა ისეთად, რისი ფლობაც ნამდვილად არ მინდოდა. ღონისძიების მსმენელები დაგროვდნენ. ჰოვერი და ფოკუსი ცალკე უნდა დამუშავდეს. გარე დაწკაპუნებებს სჭირდებოდათ სპეციალური შემთხვევები. ARIA ატრიბუტები ხელით უნდა ყოფილიყო სინქრონიზებული. ყოველი მცირე შესწორება ამატებდა ლოგიკის კიდევ ერთ ფენას. ბიბლიოთეკები დაეხმარნენ, მაგრამ ისინი ასევე უფრო შავ ყუთებს ჰგავდნენ, რომლებზეც ვმუშაობდი იმის ნაცვლად, რომ სრულად გამეგო, რა ხდებოდა კულისებში. სწორედ ამან მიბიძგა მენახა უფრო ახალი Popover API. მინდოდა მენახა, რა მოხდებოდა, თუ ხელახლა ავაშენებდი ერთ ინსტრუმენტს ბრაუზერის მშობლიური მოდელის გამოყენებით, ბიბლიოთეკის დახმარების გარეშე. როგორც ვიწყებთ, აღსანიშნავია, რომ, როგორც ნებისმიერი ახალი მახასიათებლის შემთხვევაში, მასში არის რაღაცეები, რომლებიც ჯერ კიდევ სრულდება. ამის თქმით, ის ამჟამად სარგებლობს ბრაუზერის შესანიშნავი მხარდაჭერით, თუმცა საერთო API-ში რამდენიმე ნაწილია, რომლებიც ნაკადშია. ღირს კანიუზეს თვალის დევნება ამასობაში. "ძველი" ინსტრუმენტები Popover API-მდე ინსტრუმენტების ბიბლიოთეკის გამოყენება არ იყო მალსახმობი. ნაგულისხმევი იყო. ბრაუზერებს არ გააჩნდათ ინსტრუმენტების რჩევის ძირითადი კონცეფცია, რომელიც მუშაობდა მაუსის, კლავიატურის და დამხმარე ტექნოლოგიებზე. თუ გაინტერესებთ სისწორე, თქვენი ერთადერთი ვარიანტი იყო ბიბლიოთეკის გამოყენება და ეს არის ზუსტად ის, რაც მე გავაკეთე. მაღალ დონეზე, ნიმუში ყოველთვის ერთი და იგივე იყო: ტრიგერის ელემენტი, დამალული ხელსაწყოს ელემენტი და JavaScript ამ ორის კოორდინაციისთვის.
ბიბლიოთეკა ამუშავებდა გაყვანილობას, რომელიც ელემენტს საშუალებას აძლევდა გამოეჩინა გადაადგილება ან ფოკუსირება, დამალულიყო ბუნდოვანი ან მაუსის დატოვება და გადაადგილება/ზომის შეცვლა გადახვევაზე.
დროთა განმავლობაში, ხელსაწყოს წვერი შეიძლება გახდეს მყიფე. მცირე ცვლილებები შეიცავდა რისკს. მცირე შესწორებებმა გამოიწვია რეგრესი. უარესი, ახალი ინსტრუმენტების დამატებამ იგივე სირთულე მიიღო. ტექნიკურად ყველაფერი მუშაობდა, მაგრამ არასდროს მიგრძვნია მოწესრიგებული ან დასრულებული. ეს იყო მდგომარეობა, როდესაც გადავწყვიტე ინსტრუმენტების ხელახლა აგება ბრაუზერის მშობლიური Popover API-ს გამოყენებით. მომენტი მე ვცადე Popover API მე არ გადავედი Popover API-ის გამოყენებაზე, რადგან მსურდა რაიმე ახალი ექსპერიმენტის ჩატარება. გადავრთე, რადგან დავიღალე ინსტრუმენტული მინიშნებების ქცევით, რომელიც მე მჯეროდა, რომ ბრაუზერს უკვე უნდა გაეგო. თავიდან სკეპტიკურად ვიყავი განწყობილი. ახალი ვებ API-ების უმეტესობა გპირდებათ სიმარტივეს, მაგრამ მაინც მოითხოვს წებოს, კიდეების დამუშავებას ან ლოგიკას, რომელიც ჩუმად აღადგენს იმავე სირთულეს, რომლისგან თავის დაღწევას ცდილობდით. ასე რომ, მე ვცადე Popover API უმცირესი გზით. აი, როგორ გამოიყურებოდა ეს:
-თან
1. კლავიატურა „უბრალოდ მუშაობს“ კლავიატურის მხარდაჭერა დამოკიდებული იყო რამდენიმე ფენის სწორად გაფორმებაზე: ფოკუსირება უნდა გამოეწვია ხელსაწყოს მინიშნებას, ბუნდოვანება უნდა დამალულიყო, Esc ხელით უნდა დაერთო და დროის მნიშვნელობა ჰქონდა. თუ თქვენ გამოგრჩეთ ერთი კიდეების ქეისი, ხელსაწყოს მინიშნება ან ძალიან დიდხანს დარჩება ღია ან გაქრება, სანამ ის წაიკითხება. თუ popover ატრიბუტი დაყენებულია ავტომატურ ან სახელმძღვანელოზე, ბრაუზერი იღებს საფუძვლებს: Tab და Shift+Tab ნორმალურად იქცევა, Esc ყოველ ჯერზე ხურავს ხელსაწყოს მინიშნებას და დამატებითი მსმენელი არ არის საჭირო.
რაც გაქრა ჩემი კოდების ბაზიდან იყო კლავიშების გლობალური დამმუშავებლები, Esc-ს სპეციფიკური გასუფთავების ლოგიკა და მდგომარეობის შემოწმება კლავიატურაზე ნავიგაციის დროს. კლავიატურის გამოცდილება შეჩერდა, რაც უნდა შემენარჩუნებინა და ის გახდა ბრაუზერის გარანტია. 2. Screenreader პროგნოზირებადობა ეს იყოყველაზე დიდი გაუმჯობესება. ARIA-ს ფრთხილად მუშაობის დროსაც კი, ქცევა განსხვავდებოდა, როგორც ადრე აღვნიშნე. ყოველი მცირე ცვლილება სარისკო იყო. პოპოვერის გამოყენება სათანადო როლით გამოიყურება და უფრო სტაბილურად და პროგნოზირებად გამოიყურება, რამდენადაც მოხდება:
და აი, კიდევ ერთი გამარჯვება: გადართვის შემდეგ, Lighthouse-მა შეწყვიტა ARIA მდგომარეობის არასწორი გაფრთხილებების მონიშვნა ურთიერთქმედებისთვის, ძირითადად იმის გამო, რომ აღარ არის მორგებული ARIA მდგომარეობები, რომ შემთხვევით შემეშალოს.
3. ფოკუსის მენეჯმენტი აქცენტი ადრე მყიფე იყო. ადრე მქონდა წესები, როგორიცაა: ნება მიეცით ფოკუსირების ტრიგერს აჩვენოს ხელსაწყოს მინიშნება, გადაიტანეთ ფოკუსი ხელსაწყოს მინიშნებაში და არ დახუროთ, დაბინდული ტრიგერი, როდესაც ის ძალიან ახლოსაა, დახურეთ ხელსაწყოს მინიშნება და აღადგინეთ ფოკუსი ხელით. ეს მუშაობდა მანამ, სანამ არ მოხდა. Popover API-ით ბრაუზერი ახორციელებს უფრო მარტივ მოდელს, სადაც ფოკუსი უფრო ბუნებრივად შეიძლება გადავიდეს პოპოვერში. პოპოვერის დახურვა აბრუნებს ფოკუსს ტრიგერზე და არ არის უხილავი ფოკუსის ხაფანგები ან დაკარგული ფოკუსის მომენტები. და მე არ დავამატე ფოკუსის აღდგენის კოდი; ამოვიღე.
დასკვნა Popover API ნიშნავს, რომ ინსტრუმენტების რჩევები აღარ არის ის, რასაც თქვენ სიმულაციას უკეთებთ. ისინი ბრაუზერს ესმის. გახსნა, დახურვა, კლავიატურის ქცევა, Escape დამუშავება და ხელმისაწვდომობის დიდი ნაწილი ახლა მოდის თავად პლატფორმიდან და არა ad-hoc JavaScript-დან. ეს არ ნიშნავს, რომ ხელსაწყოების ბიბლიოთეკები მოძველებულია, რადგან მათ ჯერ კიდევ აქვთ აზრი რთული დიზაინის სისტემებისთვის, მძიმე პერსონალიზაციისთვის ან მემკვიდრეობითი შეზღუდვებისთვის, მაგრამ ნაგულისხმევი შეიცვალა. პირველად, უმარტივესი ინსტრუმენტების მინიშნება ასევე შეიძლება იყოს ყველაზე სწორი. თუ გაინტერესებთ, სცადეთ ეს ექსპერიმენტი: უბრალოდ შეცვალეთ მხოლოდ ერთი ინსტრუმენტი თქვენს პროდუქტში Popover API-ით, არ გადაწეროთ ყველაფერი, არ გადაიტანოთ მთელი სისტემა და უბრალოდ შეარჩიეთ ერთი და ნახეთ რა ქრება თქვენი კოდიდან. როდესაც პლატფორმა გაძლევს უკეთეს პრიმიტიულს, მოგება არის არა მხოლოდ JavaScript-ის ნაკლები სტრიქონი, არამედ ეს არის უფრო ნაკლები რამ, რაზეც საერთოდ უნდა ინერვიულო. შეამოწმეთ სრული წყარო კოდი ჩემს GitHub რეპოში. შემდგომი კითხვა პოპოვერებსა და მათთან დაკავშირებულ API-ებში უფრო ღრმა ჩაძირვისთვის:
"პოპინ ინ", ჯეფ გრეჰემი "პოპოვერებსა და დიალოგებს შორის ურთიერთობის გარკვევა", ზელ ლიუ „რა არის პოპოვერ=მინიშნება?“, უნა კრავეცი "ინვოკერის ბრძანებები", დანიელ შვარცი "ავტომატური დახურვის შეტყობინების შექმნა HTML Popover-ით", პრეეტი გახსენით UI Popover API Explainer "დააბრუნეთ ბუშტები", ჯონ რეა "CSS წამყვანის პოზიციონირება", ხუან დიეგო როდრიგესი
MDN ასევე გთავაზობთ ყოვლისმომცველ ტექნიკურ დოკუმენტაციას Popover API-სთვის.
