लेयर बंद होने पर फ़ोकस वापस लाना

जब कोई मोडल, मेनू या ड्रॉअर खुलता है, तो focus उसके अंदर चला जाता है। बंद होने पर उपयोगकर्ता जहाँ था, वहाँ focus लौटाना आपकी ज़िम्मेदारी है।

यदि बंद की गई परत focus को हटाए गए तत्व पर छोड़ देती है, तो focus पृष्ठ के मुख्य भाग पर चला जाता है। उपयोगकर्ता अपना स्थान समझे बिना अटक जाता है।

समाधान खुलने से पहले शुरू होता है: उस तत्व का संदर्भ सुरक्षित रखें जिसने परत खोली थी, आमतौर पर document.activeElement।

परत बंद होने पर सुरक्षित किए गए ट्रिगर पर focus() कॉल करें, ताकि उपयोगकर्ता ठीक वहीं लौटे जहाँ से उसने शुरुआत की थी।

खोलना: ट्रिगर सुरक्षित करें और परत पर focus करें। बंद करना: उसे छिपाएँ और ट्रिगर पर focus लौटाएँ। यही किसी भी बंद की जा सकने वाली परत का focus अनुबंध है। 🔁

ब्राउज़र का dialog तत्व close() कॉल करने पर अपने-आप focus खोलने वाले तत्व पर लौटा देता है, जिससे आपको यह काम हाथ से नहीं करना पड़ता।

परत चाहे जिस तरह बंद हो, focus लौटाएँ: Close बटन, Escape कुंजी या पृष्ठभूमि पर क्लिक—हर स्थिति में उपयोगकर्ता को वापस पहुँचना चाहिए।

यदि परत खुली रहने के दौरान ट्रिगर हटा दिया गया हो, तो focus को किसी उचित पास के तत्व पर भेजें, कभी भी कहीं नहीं।

दृष्टि वाले माउस उपयोगकर्ता शायद ही ध्यान दें, लेकिन कीबोर्ड और स्क्रीन रीडर उपयोगकर्ताओं के लिए focus वापस न आना किसी सुविधा को अनुपयोगी बना सकता है।

परत को Enter से खोलें, Escape से बंद करें और पुष्टि करें कि focus रिंग उसे खोलने वाले बटन पर फिर दिखाई देती है।

किसी भी ओवरले को बनाते समय focus वापस लाने को बाद का काम न समझें। खोलने और बंद करने का तर्क जोड़ते ही इसे भी जोड़ दें।

अब आप पूरा चक्र संभाल सकते हैं: खुलते समय trigger सुरक्षित करें, हर बंद होने की स्थिति में focus उस पर लौटाएँ और जहाँ संभव हो, मूल dialog का सहारा लें। 🎯