फोकसच्या समस्या आणि सुधारणांसाठी सपोर्ट

सुलभ (accessible) React components तयार करण्यासाठी केवळ ARIA labels जोडणे पुरेसे नाही. वापरकर्ते कीबोर्डद्वारे तुमच्या इंटरफेसमध्ये कशा प्रकारे हालचाल करतात, याचे व्यवस्थापन करणे देखील आवश्यक आहे.

मी शून्यापासून पूर्णपणे सुलभ (accessible) नेव्हिगेशन component तयार करण्याच्या माझ्या प्रवासाचे दस्तऐवजीकरण करत आहे. या अपडेटमध्ये, मी दोन मुख्य क्षेत्रांवर लक्ष केंद्रित करत आहे: कीबोर्ड ट्रॅप्स (keyboard traps) सुधारणे आणि अधिक सुलभ सबलिस्ट (sublist) व्यवस्थापनासाठी तयारी करणे.

कीबोर्ड ट्रॅप फिक्स

जेव्हा वापरकर्ता component मध्ये प्रवेश करण्यासाठी Shift+Tab वापरतो, तेव्हा एक सामान्य समस्या उद्भवते. जर फोकस एखाद्या बंद असलेल्या सबलिस्टमधील (sublist) लिंकवर गेला, तर फोकस आउटलाइन गायब होते. कीबोर्ड वापरकर्त्यांसाठी ही एक मोठी त्रुटी आहे.

हे सुधारण्यासाठी, मी लॉजिकमध्ये बदल केला आहे:

• जर फोकस एखाद्या बंद सबलिस्टच्या शेवटच्या एलिमेंटवर (element) पोहोचला, तर सिस्टम वरच्या रांगेतील पेरेंट बटनवर (parent button) फोकस हलवते. • हे विशिष्ट हालचाल शोधण्यासाठी मी onFocus event listener चा वापर करतो. • लॉजिक हे तपासते की फोकस केलेला एलिमेंट component मधील शेवटचा आहे का. • जर तसे असेल, तर कोड वरच्या रांगेतील पूर्वज (ancestor) ओळखतो आणि तिथे फोकस हलवतो.

यामुळे वापरकर्त्याचे इंटरफेस मधील स्थान कधीही हरवत नाही याची खात्री मिळते.

सबलिस्ट क्लोजिंग सेटअप करणे

जेव्हा तुम्ही पेरेंट मेनू बंद करता, तेव्हा त्यातील सर्व उघडे सबमेनू देखील बंद झाले पाहिजेत. मानक ऑपरेटिंग सिस्टम्स याच पद्धतीने काम करतात.

React मध्ये परफॉर्मन्सच्या समस्या न निर्माण करता हे हाताळण्यासाठी, मी state मध्ये फंक्शन्स साठवणे टाळले आहे. state मध्ये फंक्शन्स साठवल्यामुळे अनावश्यक re-renders होतात.

त्याऐवजी, मी एक वेगळा दृष्टिकोन वापरला:

• मी useRef मध्ये एक Map तयार केला. • हा Map पेरेंट एलिमेंट्सशी संबंधित क्लोज फंक्शन्स साठवतो. • जेव्हा नेव्हिगेशन ॲरेची (array) मागणी केली जाते, तेव्हा सिस्टम या फंक्शन्सना ऑब्जेक्ट्समध्ये समाविष्ट (inject) करते. • Ref वापरल्यामुळे मला re-render न करता हे कनेक्शन अपडेट करता येतात.

यामुळे स्वच्छ आणि अंदाजित (predictable) मेनू वर्तनासाठी पाया रचला जातो.

पुढच्या टप्प्यात, मी त्या सबलिस्ट बंद करण्यासाठी प्रत्यक्ष लॉजिक लागू करेन.

स्त्रोत: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l