प्रॉम्प्ट और संदर्भ
मोडल को एक्टिव सरफेस के रूप में व्यवहार करना चाहिए, जबकि बैकग्राउंड दिखाई तो दे लेकिन अनुपलब्ध रहे। कार्यान्वयन में ओपनर को सुरक्षित रखा जाना चाहिए, एस्केप और क्लोज कंट्रोल्स का समर्थन होना चाहिए, और पॉजिटिव tabindex के जाल पर निर्भर रहने से बचना चाहिए।
इंटरव्यूअर क्या टेस्ट करता है
- यह समझना कि
inertएट्रिब्यूट क्या ब्लॉक करता है और क्या कॉन्फ़िगर नहीं करता है। - नेटिव डायलॉग सेमेंटिक्स, फोकस मैनेजमेंट और एक्सेसिबल नेमिंग का संयोजन।
- नेस्टेड पोर्टल्स, एनिमेशन टाइमिंग, ब्राउज़र सपोर्ट और रिड्यूस्ड मोशन को संभालना।
उत्तर देने से पहले स्पष्ट करने वाले प्रश्न
- क्या यह एक मोडल डायलॉग है या एक नॉन-मोडल पॉपओवर जो बैकग्राउंड इंटरैक्शन की अनुमति देता है?
- डायलॉग का स्वामित्व किस एलिमेंट के पास है, और पोर्टल कहाँ माउंट किया गया है?
- ओपन, कैंसिल, सबमिट और क्लोज़ पर फोकस का क्या होना चाहिए?
- क्या कोई ब्राउज़र बेसलाइन उपलब्ध है, या पुराने क्लाइंट्स के लिए फ़ॉलबैक की आवश्यकता है?
30-सेकंड उत्तर ढांचा
जहाँ संभव हो मैं नेटिव मोडल डायलॉग का उपयोग करूँगा, फोकस को इसके लेबल्ड हेडिंग या पहले सार्थक कंट्रोल पर ले जाऊँगा, और डायलॉग खुला होने के दौरान केवल बाहरी एप्लिकेशन शेल को inert के रूप में चिह्नित करूँगा। यदि ओपनर अभी भी मौजूद है तो मैं उस पर फोकस रिस्टोर करूँगा, Escape और एक स्पष्ट क्लोज़ बटन प्रदान करूँगा, तथा कीबोर्ड और स्क्रीन-रीडर पाथ्स का परीक्षण करूँगा। inert बैकग्राउंड के साथ इंटरैक्शन को रोकता है; यह डायलॉग नेमिंग, फोकस रिस्टोरेशन या स्टेट मैनेजमेंट की जगह नहीं लेता है।
चरण-दर-चरण गहन विश्लेषण
1. सही सेमेंटिक सरफेस चुनें
जब ब्राउज़र बेसलाइन इसकी अनुमति दे, तो वास्तविक मोडल के लिए showModal() के साथ नेटिव dialog एलिमेंट का उपयोग करें, और एक दृश्यमान हेडिंग या aria-labelledby के माध्यम से एक एक्सेसिबल नाम प्रदान करें। एक नॉन-मोडल डिस्क्लोज़र को पूरे पेज को inert नहीं बनाना चाहिए क्योंकि यूजर्स से सरफेस के बीच नेविगेट करने की अपेक्षा की जाती है।
2. बैकग्राउंड को अलग करें
डायलॉग के बाहर वाले एप्लिकेशन कंटेनर पर inert लागू करें, न कि ऐसे किसी कॉमन एंसेस्टर पर जिसमें डायलॉग पोर्टल भी शामिल हो। ब्राउज़र inert सबट्री को फोकस नेविगेशन से हटा देता है और फोकस इवेंट्स को रोकता है; यह सामान्य यूजर इंटरैक्शन को भी रोकता है। फ़ोकस्ड डायलॉग वाले एंसेस्टर्स पर aria-hidden को बिखेरें नहीं।
3. फोकस लाइफसाइकिल प्रबंधित करें
खोलने से पहले ओपनर को कैप्चर करें। खुलने पर, किसी मनमाने क्लोज़ आइकन के बजाय एक स्थिर हेडिंग या पहले टास्क कंट्रोल पर फोकस करें। कैंसिल करने या सफल सबमिशन पर, डायलॉग को बंद करें, inert हटाएं, और यदि ओपनर दिखाई दे रहा है और इनेबल्ड है तो फोकस रिस्टोर करें। यदि ओपनर डिलीट हो गया था, तो पास का एक तार्किक टारगेट चुनें और परिणाम की घोषणा करें।
4. पोर्टल्स और ट्रांजिशन्स को संभालें
डायलॉग को टॉप-लेवल लेयर में रेंडर करें ताकि क्लिपिंग और स्टैकिंग कॉन्टेक्स्ट इसे ट्रैप न करें। मोडल स्टेट को इंटरैक्शन के लिए एक्सपोज़ करने से पहले inert सेट करें, और डायलॉग के माउंट होने तक फोकस में देरी करें। एंट्री और एक्जिट एनिमेशन को रिड्यूस्ड-मोशन प्राथमिकताओं के साथ समन्वित करें; किसी बाधित ट्रांजिशन के बाद बैकग्राउंड को कभी भी inert न छोड़ें।
5. विफलता पाथ्स का परीक्षण करें
Tab और Shift+Tab, Escape, क्लोज़-बटन एक्टिवेशन, वैलिडेशन एरर्स, नेस्टेड डायलॉग्स, रूट बदलाव और स्क्रीन-रीडर घोषणाओं का परीक्षण करें। सत्यापित करें कि क्लिक्स, प्रोग्रामेटिक फोकस, फाइंड-इन-पेज व्यवहार और पॉइंटर इवेंट्स ब्राउज़र के inert व्यवहार से मेल खाते हैं। फ़ॉलबैक केवल तभी जोड़ें जब समर्थित ब्राउज़र सेट को इसकी आवश्यकता हो, और नेटिव व्यवहार विश्वसनीय होने पर इसे हटा दें।
उच्च-गुणवत्ता वाला नमूना उत्तर
"एक वास्तविक मोडल के लिए मैं नेटिव डायलॉग का उपयोग करूँगा, इसके लेबल्ड हेडिंग या पहले टास्क कंट्रोल पर फोकस करूँगा, और डायलॉग वाले पोर्टल एंसेस्टर के बजाय बाहरी एप्लिकेशन शेल पर inert सेट करूँगा। मैं ओपनर को कैप्चर करूँगा, बंद होने के बाद फोकस रिस्टोर करूँगा, Escape और एक स्पष्ट क्लोज़ बटन का समर्थन करूँगा, और नेमिंग व वैलिडेशन सेमेंटिक्स को निष्क्रियता (inertness) से अलग रखूँगा। मैं कीबोर्ड, स्क्रीन-रीडर, पोर्टल, एनिमेशन और रूट-चेंज पाथ्स का परीक्षण करूँगा, जिसमें बाधित ट्रांजिशन के बाद inert स्टेट को साफ़ करना भी शामिल है।"
सामान्य गलतियाँ
- उस ऐप रूट पर inert सेट करना जिसमें पोर्टल शामिल है → डायलॉग भी inert हो जाता है → डायलॉग को inert सबट्री के बाहर माउंट करें।
- inert का उपयोग फोकस-मैनेजमेंट सिस्टम के रूप में करना → ओपन या क्लोज़ पर फोकस अभी भी गलत जगह जा सकता है → एक पूर्ण फोकस लाइफसाइकिल परिभाषित करें।
- जब बैकग्राउंड में फोकस हो तब उसे aria-hidden से छिपाना → असिस्टिव टेक्नोलॉजी असंगत स्थिति देखती है → पहले फोकस मूव करें और बैकग्राउंड पर inert का उपयोग करें।
- बाधित ट्रांजिशन्स को भूल जाना → पेज लॉक रहता है → प्रत्येक क्लोज़ और अनमाउंट पाथ में inert स्टेट को साफ़ करें।
फॉलो-अप प्रश्न और उत्तर
क्या inert किसी फोकस ट्रैप की जगह लेता है?
यह बैकग्राउंड को फ़ोकसेबल होने से रोकता है, इसलिए एक मोडल अक्सर हाथ से लिखे गए ट्रैप से बच सकता है। आपको अभी भी प्रारंभिक फोकस सेट करने, इसे रिस्टोर करने, डायलॉग का नाम देने और ब्राउज़र या कंपोनेंट फ़ॉलबैक को संभालने की आवश्यकता होती है।
क्या कोई नॉन-मोडल ड्रॉअर inert का उपयोग कर सकता है?
केवल तभी जब प्रोडक्ट जानबूझकर बैकग्राउंड को अनुपलब्ध बनाता है। एक नॉन-मोडल ड्रॉअर के लिए जो बैकग्राउंड इंटरैक्शन की अनुमति देता है, पेज को inert के रूप में चिह्नित न करें; इसके बजाय उपयुक्त डिस्क्लोज़र सेमेंटिक्स का उपयोग करें।
क्या होगा यदि ओपनर गायब हो जाए?
निकटतम तार्किक कंट्रोल पर फोकस रिस्टोर करें, जैसे कि अपडेट की गई पंक्ति या पेज हेडिंग, और आवश्यकता पड़ने पर परिणाम की घोषणा करें। कभी भी किसी डिटैच्ड या अक्षम (disabled) एलिमेंट पर फोकस करने का प्रयास न करें।