फ्रंटएंड इंटरव्यू: dialog closedby को खारिज (dismissal) को कैसे नियंत्रित करना चाहिए?

प्रॉम्प्ट और संदर्भ

एक एडमिन कंसोल को एक विनाशकारी कन्फ़र्मेशन और एक कारण फ़ॉर्म की आवश्यकता है। कुछ फ़्लो केवल एक स्पष्ट कार्रवाई के माध्यम से ही बंद होने चाहिए; अन्य Escape या बाहरी क्लिक से बंद हो सकते हैं। कीबोर्ड, टच और वैलिडेशन पाथ के लिए नेटिव dialog एलिमेंट डिस्मिसल पॉलिसी डिज़ाइन करें।

MDN closedby मानों none, closerequest, और any को परिभाषित करता है: केवल डेवलपर मैकेनिज्म, प्लेटफ़ॉर्म क्लोज़ रिक्वेस्ट के साथ डेवलपर मैकेनिज्म, या तीनों मैकेनिज्म। मॉडल डायलॉग showModal() का उपयोग करते हैं; नॉन-मॉडल डायलॉग show() का उपयोग करते हैं।

इंटरव्यूअर क्या टेस्ट कर रहा है

कैंडिडेट को बिज़नेस रिस्क को डिस्मिसल पॉलिसी से मैप करना चाहिए, मॉडल डायलॉग्स को पॉपओवर से अलग पहचानना चाहिए, और Escape, लाइट डिस्मिस, close(), requestClose(), method="dialog", इनिशियल फ़ोकस, रेस्टोरेशन और फ़ॉर्म वैलिडेशन को समझाना चाहिए।

पहले पूछने के लिए स्पष्टीकरण प्रश्न

क्या किसी विनाशकारी कन्फ़र्मेशन को गलती से खारिज किया जा सकता है, और क्या अनसेव्ड इनपुट बना रहना चाहिए?
क्या Escape या बाहरी क्लिक कैंसिल के बराबर है, या इसके लिए किसी अन्य कन्फ़र्मेशन की आवश्यकता है?
क्या कैंसिल बटन को आवश्यक-फ़ील्ड (required-field) वैलिडेशन को बायपास करना चाहिए?
क्या असमर्थित ब्राउज़रों को समान डिस्मिसल व्यवहार प्रदान करना चाहिए?
डायलॉग बंद होने पर फ़ोकस कहाँ वापस जाना चाहिए?

30-सेकंड उत्तर फ़्रेमवर्क

"विनाशकारी कार्रवाइयों के लिए मैं showModal() के साथ closedby="closerequest" का उपयोग करता हूँ, या सबसे सख्त कन्फ़र्मेशन के लिए none का, साथ ही स्पष्ट कैंसिल और कन्फ़र्म बटन का उपयोग करता हूँ। कम जोखिम वाला सूचना पैनल any या popover="auto" का उपयोग कर सकता है। method="dialog" वाला फ़ॉर्म एक मान लौटाता है; जब कैंसिल बटन को वैलिडेशन को बायपास करना हो, तो वह formnovalidate का उपयोग कर सकता है। मैं एक सोच-समझकर इनिशियल फ़ोकस सेट करता हूँ और ट्रिगर पर फ़ोकस रीस्टोर करता हूँ। कैपेबिलिटी डिटेक्शन स्पष्ट-बटन और मैनुअल-कीबोर्ड फ़ॉलबैक प्रदान करता है।"

चरण-दर-चरण विस्तृत विश्लेषण

चरण 1: मॉडल या नॉन-मॉडल चुनें

showModal() शेष दस्तावेज़ को inert बना देता है और विनाशकारी कन्फ़र्मेशन या आवश्यक कार्य के लिए उपयुक्त है। show() एक सहायक पैनल के लिए पेज को इंटरैक्टिव छोड़ देता है। केवल open एट्रिब्यूट को टॉगल करने से मॉडल फ़ोकस और बैकग्राउंड सेमांटिक्स स्थापित नहीं होते हैं।

चरण 2: जोखिम को closedby से मैप करें

closedby="none" केवल डेवलपर-परिभाषित क्लोज़िंग की अनुमति देता है और अपरिवर्तनीय कन्फ़र्मेशन के लिए उपयुक्त है। closerequest Escape या प्लेटफ़ॉर्म क्लोज़ रिक्वेस्ट को भी स्वीकार करता है। any बाहरी-क्लिक लाइट डिस्मिस जोड़ता है और कम जोखिम वाली जानकारी के लिए उपयुक्त है।

html

<dialog id="delete-dialog" closedby="closerequest">
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

चरण 3: Escape, request-close और close को संभालें

Escape या प्लेटफ़ॉर्म जेस्चर एक क्लोज़ रिक्वेस्ट है। requestClose() रिक्वेस्ट-क्लोज़ पाथ चला सकता है ताकि एप्लिकेशन इसकी पुष्टि कर सके या इसे रोक सके। close() सीधे बंद हो जाता है और returnValue सेट कर सकता है। Escape को कभी भी कन्फ़र्म डिलीशन के रूप में व्याख्यायित न करें।

चरण 4: फ़ोकस प्रबंधित और रीस्टोर करें

जब कोई मॉडल खुलता है, तो सबसे उपयुक्त इनपुट, कैंसिल बटन या हेडिंग पर फ़ोकस करें; dialog एलिमेंट पर tabindex न लगाएं। बंद होने पर, ट्रिगर पर फ़ोकस वापस लाएं, या यदि ट्रिगर हटा दिया गया था, तो एक स्थिर प्रतिस्थापन (stable replacement) पर फ़ोकस लाएं।

चरण 5: form method=dialog का सोच-समझकर उपयोग करें

method="dialog" डायलॉग को बंद करता है और नेटवर्क रिक्वेस्ट भेजे बिना फ़ॉर्म कंट्रोल स्थिति को सुरक्षित रखता है; बटन का value बदलकर returnValue हो जाता है। यदि कैंसिल को आवश्यक वैलिडेशन को बायपास करना है, तो formnovalidate या स्पष्ट close() का उपयोग करें ताकि उपयोगकर्ता कभी फंस न जाए।

चरण 6: dialog और Popover के बीच अंतर करें

पॉपओवर नॉन-मॉडल होता है और टॉप लेयर में रहता है। popover="auto" लाइट डिस्मिस का समर्थन करता है; manual तब तक खुला रहता है जब तक कि इसे स्पष्ट रूप से छुपाया न जाए और कई स्वतंत्र पॉपओवरों की अनुमति देता है। जहाँ मॉडल इनर्टनेस की आवश्यकता हो, वहाँ पॉपओवर का उपयोग न करें।

चरण 7: समर्थन का पता लगाएं और फ़ॉलबैक प्रदान करें

HTMLDialogElement, showModal, और closedby समर्थन की जाँच करें। इनके बिना, स्पष्ट कंट्रोल, मैनुअल Escape हैंडलिंग, फ़ोकस मैनेजमेंट और बैकग्राउंड ब्लॉकिंग प्रदान करें। फ़ॉलबैक को समान कैंसिल और कन्फ़र्म अनुबंध बनाए रखना चाहिए।

चरण 8: डिस्मिसल और एक्सेसिबिलिटी का परीक्षण करें

Tab, Escape, बाहरी क्लिक, टच, विफल वैलिडेशन, बार-बार खोलना, कई मॉडल, बैक जेस्चर और पुराने ब्राउज़रों का परीक्षण करें। क्लोज़ का कारण (confirm, cancel, escape, light-dismiss) रिकॉर्ड करें और नामकरण, स्थिति और फ़ोकस मूवमेंट को सत्यापित करने के लिए स्क्रीन रीडर का उपयोग करें।

मॉडल उच्च-गुणवत्ता उत्तर

"एक विनाशकारी कन्फ़र्मेशन showModal() और closedby="closerequest" का उपयोग करता है; सबसे सख्त फ़्लो स्पष्ट कैंसिल बटन के साथ none का उपयोग करता है। कम जोखिम वाली जानकारी any या popover="auto" का उपयोग कर सकती है। method="dialog" परिणाम लौटाता है, और आवश्यकता पड़ने पर कैंसिल वैलिडेशन को बायपास कर सकता है। मैं इनिशियल फ़ोकस सेट करता हूँ, ट्रिगर फ़ोकस रीस्टोर करता हूँ, समर्थन का पता लगाता हूँ, और स्पष्ट कंट्रोल व मैनुअल कीबोर्ड/फ़ोकस हैंडलिंग पर फ़ॉलबैक करता हूँ। परीक्षण हर डिस्मिसल स्रोत और सहायक तकनीक को कवर करते हैं।"

सामान्य गलतियाँ

हर डायलॉग के लिए any का उपयोग करना → विनाशकारी कार्रवाइयां गलती से बंद हो जाती हैं → closedby को जोखिम से मैप करें।
dialog में tabindex जोड़ना → फ़ोकस सेमांटिक्स गलत हो जाते हैं → किसी आंतरिक कंट्रोल या हेडिंग पर फ़ोकस करें।
close को requestClose की तरह मानना → कन्फ़र्मेशन लॉजिक छूट जाता है → अनुरोधित और सीधे क्लोज़ में अंतर करें।
आवश्यक फ़ॉर्म के कैंसिल बटन का वैलिडेशन में विफल होना → उपयोगकर्ता फंस जाता है → formnovalidate या close का उपयोग करें।
मॉडल को पॉपओवर से बदलना → बैकग्राउंड इंटरैक्टिव बना रहता है → जहाँ इनर्टनेस मायने रखती है, वहाँ showModal का उपयोग करें।
केवल माउस से परीक्षण करना → कीबोर्ड और टच उपयोगकर्ता बाहर नहीं निकल सकते → Escape, Tab, बाहरी क्लिक और स्क्रीन रीडर को कवर करें।

फॉलो-अप प्रश्न और प्रभावी उत्तर

फॉलो-अप 1: closerequest और none के बीच मुख्य अंतर क्या है?

closerequest डेवलपर कंट्रोल के अलावा Escape या प्लेटफ़ॉर्म क्लोज़ रिक्वेस्ट को स्वीकार करता है; none केवल डेवलपर कंट्रोल स्वीकार करता है और अपरिवर्तनीय कार्रवाइयों के लिए उपयुक्त है।

फॉलो-अप 2: showModal, open से अधिक विश्वसनीय क्यों है?

यह मॉडल स्थिति, बैकग्राउंड इनर्टनेस और ब्राउज़र फ़ोकस व्यवहार स्थापित करता है। केवल open सेट करने से एक नॉन-मॉडल डायलॉग बनता है।

फॉलो-अप 3: Escape के बाद returnValue क्या होता है?

Escape किसी सबमिट बटन मान का प्रतिनिधित्व नहीं करता है जब तक कि एप्लिकेशन कोई मान सेट न करे। क्लोज़ के कारण को अलग से escape या request-close के रूप में रिकॉर्ड करें।

फॉलो-अप 4: कैंसिल आवश्यक वैलिडेशन को कैसे बायपास कर सकता है?

कैंसिल कंट्रोल पर formnovalidate लगाएं या close("cancel") को कॉल करें; कन्फ़र्म पर सामान्य वैलिडेशन बनाए रखें।

फॉलो-अप 5: पुराने ब्राउज़रों के लिए फ़ॉलबैक क्या है?

स्पष्ट ओपन/क्लोज़ कंट्रोल प्रदान करें और मैन्युअल रूप से Escape, फ़ोकस ट्रैपिंग, बैकग्राउंड ब्लॉकिंग और क्लोज़ कारणों को प्रबंधित करें। नेटिव समर्थन बहाल होने पर अनुबंध परीक्षणों को समान रखें।