प्रॉम्प्ट और दायरा
यह एक आधुनिक Web Platform और एक्सेसिबिलिटी इंटरैक्शन की समस्या है। इसका लक्ष्य एक ऐसा मेनू, फ़िल्टर पैनल या हेल्प सरफ़ेस बनाना है जो light-dismiss का समर्थन करते हुए पेज को उपयोग योग्य बनाए रखे। HTML Popover API ब्राउज़र-प्रबंधित डिस्प्ले लाइफ़साइकिल प्रदान करने के लिए popover, popovertarget और top layer का उपयोग करता है। प्रत्येक ओवरले को नेटिव API पर माइग्रेट न करें; पोज़िशनिंग अपने आप में मुख्य अभ्यास नहीं है।
साक्षात्कारकर्ता क्या टेस्ट कर रहा है
popover="auto",popover="manual"और मॉडल डायलॉग सेमेंटिक्स में अंतर करना।- ट्रिगर, सरफ़ेस और क्लोज़ ऐक्शन्स को सेमेंटिक रूप से समझने योग्य बनाए रखना।
- Escape, बाहरी क्लिक, एकाधिक सरफ़ेस, फ़ोकस रिटर्न और लाइफ़साइकिल इवेंट्स को संभालना।
- प्रोग्रेसिव एन्हांसमेंट, ब्राउज़र सपोर्ट और एक नॉन-ब्रेकिंग फ़ॉलबैक को समझाना।
पहले पूछे जाने वाले स्पष्टीकरण
पुष्टि करें कि क्या बैकग्राउंड इंटरैक्टिव बना रहता है। यदि इसे ब्लॉक किया जाना चाहिए, तो popover के बजाय <dialog> के साथ showModal() का उपयोग करें। स्पष्ट करें कि क्या केवल एक सरफ़ेस खुली हो सकती है, क्या कई मैनुअल सरफ़ेस सह-अस्तित्व में रह सकती हैं, क्या ट्रिगर टॉगल करता है, क्या एक सफल फ़ॉर्म सबमिशन इसे बंद कर देता है, और न्यूनतम ब्राउज़र रेंज क्या है। एक फ़िल्टर सरफ़ेस आमतौर पर नॉन-मॉडल होती है, लेकिन कीबोर्ड उपयोगकर्ताओं को अभी भी एक स्पष्ट फ़ोकस और क्लोज़ पाथ की आवश्यकता होती है।
30-सेकंड का उत्तर
सेमेंटिक HTML से शुरुआत करें: ट्रिगर पर popovertarget और सरफ़ेस पर popover="auto" लगाएं; केवल कस्टम क्लोज़ ऑर्केस्ट्रेशन के लिए manual का उपयोग करें। ब्राउज़र top-layer व्यवहार, Escape और बाहरी light-dismiss प्रदान करता है। मैं फ़ोकस एंट्री, फ़ोकस रिटर्न, स्टेटस टेक्स्ट और beforetoggle/toggle लाइफ़साइकिल हैंडलिंग जोड़ता हूँ। असमर्थित ब्राउज़र एक वैश्विक क्लिक हैंडलर के बजाय (जो असंबद्ध सरफ़ेस को बंद कर सकता है) एक छोटे पॉलीफ़िल के साथ समान DOM और नाम बनाए रखते हैं।
चरण-दर-चरण समाधान
1. popover या मॉडल डायलॉग चुनें
Popover मेनू, फ़िल्टर, नॉन-ब्लॉकिंग सहायता और अस्थायी कार्यों के लिए उपयुक्त है; पेज नॉन-मॉडल रहता है। <dialog> के साथ showModal() उन पुष्टियों, भुगतानों या चेतावनियों के लिए उपयुक्त है जिन्हें पहले संभाला जाना चाहिए क्योंकि यह मॉडल सेमेंटिक्स की आपूर्ति करता है और बैकग्राउंड को ब्लॉक करता है। दोनों top layer का उपयोग कर सकते हैं, लेकिन उनके एक्सेसिबल नाम, फ़ोकस रणनीति और बंद होने के कारण भिन्न होते हैं; dialog को popover एट्रिब्यूट से बदलना समतुल्य नहीं है।
2. ट्रिगर और सरफ़ेस संबंध स्थापित करें
सबसे छोटा सेमेंटिक स्ट्रक्चर ब्राउज़र को टार्गेट संबंध बनाए रखने की अनुमति देता है:
<button type="button" popovertarget="filters" aria-controls="filters">
Filters
</button>
<div id="filters" popover="auto">
<form method="get">
<label>Status <select name="status"><option>All</option></select></label>
<button type="submit">Apply</button>
</form>
</div>popovertarget बटन को एक डिक्लेरेटिव ट्रिगर बनाता है, और ब्राउज़र खोलने और बंद करने के दौरान संबंध का प्रबंधन करता है। aria-controls सहायक तकनीक को संबंध समझने में मदद कर सकता है, लेकिन यह एक दृश्यमान नाम या सही फ़ोकस व्यवहार का स्थान नहीं लेता है। जटिल घटकों को स्क्रिप्ट में एक ट्रिगर संदर्भ बनाए रखना चाहिए और फ़ोकस केवल तभी वापस करना चाहिए यदि वह अभी भी मौजूद है और फ़ोकसेबल है।
3. auto, manual और light-dismiss को समझें
एक auto popover ब्राउज़र-प्रबंधित light-dismiss का समर्थन करता है: Escape या बाहरी क्लिक इसे बंद कर सकता है, और यह स्वचालित क्लोज़िंग चेन में भाग लेता है। एक manual popover उन तंत्रों द्वारा बंद नहीं किया जाता है; स्पष्ट रूप से showPopover(), hidePopover() या togglePopover() को कॉल करें। इसका उपयोग तब करें जब कई सरफ़ेस सह-अस्तित्व में रह सकें या लाइफ़साइकिल कस्टम हो। auto के ऊपर डॉक्यूमेंट-लेवल क्लिक क्लोज़िंग न जोड़ें; नेस्टेड सरफ़ेस और ट्रिगर क्लिक्स में रेस कंडीशन हो सकती है।
4. top layer, पोज़िशनिंग और बैकड्रॉप को संभालें
एक बार खुलने के बाद, एक popover top layer में प्रवेश करता है और अब किसी सामान्य पूर्वज के overflow या z-index स्टैकिंग संदर्भ द्वारा बाधित नहीं होता है। प्लेसमेंट के लिए CSS Anchor Positioning या सामान्य लेआउट का उपयोग करें, साथ ही प्लेसमेंट विफल होने पर एक स्टैटिक फ़ॉलबैक रखें। एक नॉन-मॉडल popover को स्वचालित रूप से फ़ुल-स्क्रीन बैकड्रॉप नहीं मिलना चाहिए; यदि उत्पाद को इसकी आवश्यकता है, तो पुन: जाँचें कि क्या आवश्यकता वास्तव में मॉडल डायलॉग व्यवहार की है। top layer पेंटिंग क्रम को बदलता है लेकिन संकीर्ण व्यूपोर्ट, स्क्रॉल कंटेनर या कोलिज़न प्लेसमेंट को हल नहीं करता है।
5. फ़ोकस और कीबोर्ड व्यवहार परिभाषित करें
फ़ोकस को पहले एक्शन योग्य कंट्रोल पर ले जाएं, या परीक्षण के बाद ही ब्राउज़र डिफ़ॉल्ट बनाए रखें। Escape पर, फ़ोकस को ट्रिगर पर लौटाएं; यदि ट्रिगर हटा दिया गया था, तो निकटतम दृश्य संदर्भ पर फ़ॉलबैक करें। Tab क्रम को स्वाभाविक रूप से सरफ़ेस को पार करना चाहिए; tabindex="-1" के साथ सभी कंट्रोल्स को न छिपाएं। मेनू जैसे popover को मेनू-आइटम एरो-की और चयन सेमेंटिक्स की आवश्यकता होती है, जबकि एक फ़िल्टर फ़ॉर्म को सामान्य फ़ॉर्म कीबोर्ड व्यवहार बनाए रखना चाहिए।
6. ग्लोबल स्थिति का अनुमान लगाने के बजाय लाइफ़साइकिल का निरीक्षण करें
ट्रांज़िशन को मान्य करने, बंद होने का कारण रिकॉर्ड करने या एप्लिकेशन स्थिति को सिंक्रनाइज़ करने के लिए beforetoggle का उपयोग करें; स्थिति वास्तव में बदलने के बाद लेबल और फ़ोकस अपडेट करने के लिए toggle का उपयोग करें। प्रति एलिमेंट हैंडलर रजिस्टर करें और कंपोनेंट नष्ट होने पर उन्हें साफ़ करें। परस्पर अनन्य (mutually exclusive) auto सरफ़ेस के लिए, एक पुरानी ग्लोबल ओपन आईडी बनाए रखने के बजाय ब्राउज़र के क्लोज़ स्टैक पर भरोसा करें।
7. फ़ॉर्म सबमिशन और एप्लिकेशन स्थिति का समन्वय करें
सफल फ़िल्टर सबमिशन के बाद, यदि वांछित हो तो स्पष्ट रूप से hidePopover() को कॉल करें, लेकिन बंद होने को सफलता के प्रमाण के रूप में न मानें। विफल अनुरोध पर, सरफ़ेस को खुला रखें और त्रुटि को फ़ॉर्म से जोड़ें। ओपन स्थिति एक अस्थायी UI स्थिति है; फ़िल्टर मान व्यावसायिक स्थिति हैं। उन्हें अलग रखें, और :popover-open को सत्य का एकमात्र स्रोत मानने के बजाय नेविगेशन या इतिहास परिवर्तनों पर उनकी पुनर्गणना करें।
8. प्रोग्रेसिव एन्हांसमेंट का उपयोग करें और इंटरैक्शन का परीक्षण करें
वास्तविक API, जैसे कि HTMLElement.prototype.showPopover के लिए फ़ीचर-डिटेक्ट करें। उपलब्ध होने पर नेटिव व्यवहार का उपयोग करें; अन्यथा डिस्प्ले, Escape, बाहरी क्लिक और फ़ोकस रिटर्न के लिए एक छोटे पॉलीफ़िल के साथ समान ट्रिगर, कंटेंट और एक्सेसिबल नाम बनाए रखें। कीबोर्ड, टच, ज़ूम, स्क्रॉलिंग, नेस्टेड सरफ़ेस, हटाए गए ट्रिगर, विफल फ़ॉर्म और रिड्यूस्ड मोशन का परीक्षण करें। अकेले पिक्सल की जांच करने के बजाय स्क्रीन रीडर के साथ नाम, स्थिति और त्रुटियों को सत्यापित करें।
आदर्श उत्तर
मैं इसे एक नॉन-मॉडल फ़िल्टर popover के रूप में परिभाषित करूँगा, डायलॉग के रूप में नहीं। बटन popovertarget का उपयोग करता है और पैनल popover="auto" का उपयोग करता है; ब्राउज़र top layer, Escape और बाहरी light-dismiss का प्रबंधन करता है, जबकि स्क्रिप्ट फ़ॉर्म स्थिति, फ़ोकस रिटर्न और लाइफ़साइकिल इवेंट्स को संभालती है। खुलने पर, फ़ोकस पहले कंट्रोल में जाता है; बंद होने पर, यह ट्रिगर पर लौटता है। एक विफल सबमिशन सरफ़ेस को खुला रखता है और त्रुटि को उजागर करता है; सफलता इसे बंद कर सकती है। manual का उपयोग केवल तभी करें जब कई कस्टम सरफ़ेस का सह-अस्तित्व आवश्यक हो, और auto के लिए डॉक्यूमेंट क्लिक हैंडलिंग की नकल न करें। फ़ीचर डिटेक्शन विफल होने पर एक स्टैटिक प्लेसमेंट फ़ॉलबैक और एक सेमेंटिक पॉलीफ़िल प्रदान करें। कीबोर्ड, टच, स्क्रॉल और सहायक तकनीक पाथ्स का परीक्षण करें।
सामान्य गलतियाँ
- ऐसी पुष्टि के लिए popover का उपयोग करना जिसे बैकग्राउंड को ब्लॉक करना चाहिए, जिससे मॉडल सेमेंटिक्स खो जाता है।
autoपर डॉक्यूमेंट क्लिक क्लोज़िंग जोड़ना, जो नेस्टेड सरफ़ेस या सबमिट कंट्रोल्स को बंद कर सकता है।- ट्रिगर संबंध, फ़ोकस रिटर्न या त्रुटि स्थिति को बनाए रखे बिना
displayको टॉगल करना। - नॉन-मॉडल व्यवहार को बनाए रखते हुए फ़ुल-स्क्रीन बैकड्रॉप के साथ डायलॉग का अनुकरण करना।
- top layer को स्वचालित पोज़िशनिंग के रूप में मानना और स्क्रॉलिंग, संकीर्ण व्यूपोर्ट और कोलिज़न फ़ॉलबैक की उपेक्षा करना।
- किसी विफल फ़ॉर्म को बिना शर्त बंद करना ताकि उपयोगकर्ता त्रुटि को न देख सकें और न ही ठीक कर सकें।
- केवल माउस क्लिक का परीक्षण करना और Escape, Tab, टच और स्क्रीन-रीडर व्यवहार को छोड़ देना।
फॉलो-अप प्रश्न
इसके बजाय आपको <dialog> का उपयोग कब करना चाहिए?
<dialog> के साथ showModal() का उपयोग तब करें जब बैकग्राउंड inert होना चाहिए, उपयोगकर्ता को पहले कोई निर्णय लेना चाहिए, या मॉडल फ़ोकस व्यवहार आवश्यक हो। Popover light-dismiss और नॉन-मॉडल सेमेंटिक्स बैकग्राउंड ब्लॉकिंग और स्पष्ट रद्द/पुष्टि कार्रवाइयों की जगह नहीं ले सकते।
आप कई फ़िल्टर सरफ़ेस को परस्पर अनन्य (mutually exclusive) कैसे बनाते हैं?
परस्पर अनन्य सरफ़ेस के लिए auto को प्राथमिकता दें ताकि ब्राउज़र क्लोज़ चेन का प्रबंधन करे। यदि कई manual सरफ़ेस सह-अस्तित्व में रह सकती हैं, तो एक स्पष्ट इंस्टेंस सेट बनाए रखें, केवल लक्षित इंस्टेंस को बंद करें, और प्रत्येक इंस्टेंस के ट्रिगर और फ़ोकस रिटर्न को स्वतंत्र रूप से स्टोर करें।
आप Popover API के बिना ब्राउज़र का समर्थन कैसे करते हैं?
API का फ़ीचर-डिटेक्ट करें और डिस्प्ले, क्लोज़ व्यवहार, Escape, बाहरी क्लिक और फ़ोकस रिटर्न के लिए पॉलीफ़िल के साथ समान DOM और सेमेंटिक एट्रिब्यूट्स को सुरक्षित रखें। किसी अनाम, कीबोर्ड-दुर्गम रूप से एब्सोल्यूट पोज़िशन्ड div पर डिग्रेड न करें; कम्पैटिबिलिटी मैट्रिक्स का दस्तावेजीकरण करें और रिलीज़ से पहले इसका परीक्षण करें।
आप light-dismiss सीमाओं का परीक्षण कैसे करते हैं?
ट्रिगर, सरफ़ेस के अंदर, बाहरी सिबलिंग्स, स्क्रॉल कंटेनर और किसी अन्य popover पर क्लिक का परीक्षण करें। आंतरिक क्लिक को खुला रहना चाहिए; बाहरी क्लिक को केवल योग्य auto सरफ़ेस को बंद करना चाहिए, और बार-बार ट्रिगर क्लिक से डुप्लिकेट स्थिति नहीं बननी चाहिए। Escape और टच परीक्षण जोड़ें।
क्या एनीमेशन एक्सेसिबिलिटी को नुकसान पहुंचा सकता है?
फ़ोकस और पठनीय स्थिति को सुसंगत रखते हुए ट्रांज़िशन को छोटा करने या हटाने के लिए prefers-reduced-motion का उपयोग करें। केवल ओपेसिटी के साथ फ़ोकसेबल कंट्रोल्स को न छिपाएं; बंद होने के दौरान डुप्लिकेट सबमिशन को रोकें और सहायक तकनीक के लिए एक स्थिर स्थिति परिवर्तन को प्रदर्शित करें।
यदि प्लेसमेंट विफल हो जाए तो क्या होगा?
एंकर पोज़िशनिंग के साथ, एक सामान्य-प्रवाह (normal-flow) या व्यूपोर्ट-सुरक्षित फ़ॉलबैक प्रदान करें और आकार व स्क्रॉल परिवर्तनों पर प्रतिक्रिया दें। किसी विफलता के कारण सामग्री कटनी नहीं चाहिए या स्क्रीन से बाहर नहीं जानी चाहिए; मुख्य फ़ॉर्म पोज़िशनिंग एन्हांसमेंट के बिना भी उपयोग योग्य बना रहता है।