एंगुलर सीडीके ट्रैप फोकस निर्देश का उपयोग कैसे करें

फ़ोकस ट्रैप एक वेब एप्लिकेशन के भीतर एक बहुत ही महत्वपूर्ण एक्सेसिबिलिटी सुविधा है। इस पोस्ट में, मैं सबसे पहले आपको यह समझने में मदद करूंगा कि यह क्या है, फिर यह महत्वपूर्ण क्यों है, और अंत में, मैं दिखाऊंगा कि जहां आवश्यक हो, अपने एंगुलर ऐप्स के भीतर अवधारणा को जल्दी और आसानी से कैसे जोड़ें। और, यह एंगुलर सीडीके के लिए बहुत आसान है। ठीक है, चलिए इस पर आते हैं।

यदि आप उन लोगों में से हैं जो विभिन्न उपकरणों के साथ वेब को आसानी से देख, सुन और उपयोग कर सकते हैं, तो एक्सेसिबिलिटी को समझना या इसके बारे में सोचना थोड़ा मुश्किल हो सकता है, इसलिए ऐसी चीजें बनाना भी आसान हो सकता है जो उन लोगों के लिए अच्छी तरह से काम नहीं करती हैं। नहीं कर सकता।

फोकस ट्रैप क्या है?

फोकस ट्रैप एक ऐसी सुविधा है जो इन लोगों के अनुभवों को बेहतर बनाने में मदद करती है। यह किसी दिए गए कंटेनर के भीतर उपयोगकर्ता फोकस को प्रबंधित करने का एक तरीका है।

उदाहरण के लिए, एक मोडल लें। यदि कोई उपयोगकर्ता फोकस प्रबंधित किए बिना एक मोडल खोलता है, तो जब वे टैब कुंजी का उपयोग करके कीबोर्ड के माध्यम से नेविगेट करना शुरू करते हैं, तो मोडल के पीछे के आइटम फोकस प्राप्त करना जारी रखते हैं। यह अजीब है और यह वह नहीं है जिसकी उपयोगकर्ता अपेक्षा करेगा, है ना? हमें उन्हें प्रोग्रामेटिक रूप से मोडल के भीतर केंद्रित करने की आवश्यकता है।

लेकिन यह पर्याप्त नहीं है; यदि हम यहां रुकते हैं, जैसे कि हम मोडल के माध्यम से टैब करते हैं, अंततः, हम सभी फोकस करने योग्य आइटमों के माध्यम से टैब करेंगे, और फिर, हम फिर से मोडल के पीछे मूल दस्तावेज़ के भीतर आइटम पर ध्यान केंद्रित करने पर वापस आ जाएंगे।

इसके बजाय हमें जो करने की ज़रूरत है वह फोकस को फंसाना है ताकि जब उपयोगकर्ता मोडल में अंतिम आइटम पर ध्यान केंद्रित करे, तो फोकस अगले टैब पर मोडल में पहले फोकस करने योग्य तत्व पर वापस रखा जाएगा।

ठीक है, अब जब हम जानते हैं कि फोकस ट्रैप क्या है, तो शायद हमें यह एहसास होने लगा है कि इस कार्यक्षमता को बनाने के लिए कुछ प्रयास करने होंगे, है ना?

खैर, एंगुलर के भीतर नहीं। सीडीके के साथ, A11yModule से cdkTrapFocus निर्देश का उपयोग करना बहुत आसान है।

एंगुलर cdkTrapFocus निर्देश

आइए एक उदाहरण देखें. यहां, हमारे पास वैन शू ब्रांड के लिए एक वेब ऐप है।

सबसे ऊपर, हमारे पास एक साइन-अप बटन है। जब हम इसे क्लिक करते हैं, और फिर चारों ओर टैब करते हैं, तो हम देख सकते हैं कि फोकस पृष्ठभूमि में आइटम के चारों ओर घूम रहा है।

वह नहीं जो हम चाहते हैं, है ना?

ठीक है, आइए cdkTrapFocus जोड़ें। इसका उपयोग करने के लिए सबसे पहले हमें A11yModule आयात करना होगा।

साइन-अप-modal.component.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }

आप में से जो लोग इस संक्षिप्त नाम से अपरिचित हैं, उनके लिए एली एक्सेसिबिलिटी शब्द का संक्षिप्त रूप है। यह इस अवधारणा से आता है कि शब्द ए से शुरू होता है, वाई पर समाप्त होता है, और बीच में ग्यारह अक्षर होते हैं।

एंगुलर सीडीके के एक्सेसिबिलिटी मॉड्यूल के भीतर कई एक्सेसिबिलिटी विशेषताएं हैं, और cdkTrapFocus निर्देश उनमें से एक है।

इसलिए, एक बार जब हम इसे आयात कर लेते हैं, तो अब हम इसे टेम्पलेट के भीतर उपयोग कर सकते हैं। हमें बस इसे उस तत्व में जोड़ने की जरूरत है जो हमारे फॉर्म को लपेटता है।

साइन-अप-modal.component.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 

cdkTrapFocusAutoCapture @Input के साथ आरंभीकरण पर फोकस प्रदान करना

अच्छी खबर है, cdkTrapFocus निर्देश में एक ऑटो-फोकस सुविधा अंतर्निहित है। हम cdkTrapFocusAutoCapture @Input उपयोग कर सकते हैं। आरंभ होने पर यह इनपुट स्वचालित रूप से निर्देश के भीतर पहले फोकस करने योग्य आइटम पर ध्यान केंद्रित करेगा। यह डिफ़ॉल्ट रूप से असत्य है, इसलिए हमें सत्य का मान प्रदान करने की आवश्यकता है।

 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>

अब, जब हम मोडल खोलते हैं, तो नाम फ़ील्ड खुलने पर ठीक से केंद्रित होता है। और, जैसे ही हम टैब करते हैं, जब हम बंद करें बटन पर पहुंचते हैं, तो हम नाम फ़ील्ड पर वापस आ जाएंगे। इसके अलावा, यदि हम पीछे की ओर नेविगेट करने के लिए shift + tab दबाते हैं, तो हम मोडल को छोड़े बिना उल्टे क्रम में चले जाएंगे।

इसलिए, यह न केवल वास्तव में सभी उपयोगकर्ताओं के लिए अत्यधिक उपयोगी है, बल्कि इसे लागू करना भी बहुत आसान है।

ध्यान देने योग्य एक आखिरी बात, ट्रैप फोकस निर्देश आरंभीकरण से पहले अंतिम केंद्रित तत्व का ट्रैक रखता है, इसलिए जब हम मोडल को बंद करते हैं, तो फोकस उस बटन पर वापस आ जाता है जिसने इसे खोला था।

बढ़िया, हमने बहुत सारा काम बचा लिया और अपने मॉडल को अधिक सुलभ बना दिया।

क्या आप इसे क्रियान्वित होते देखना चाहते हैं?

नीचे दिए गए स्टैकब्लिट्ज उदाहरण में इन तकनीकों के डेमो कोड और उदाहरण देखें। यदि आपका कोई प्रश्न या विचार है, तो टिप्पणी छोड़ने में संकोच न करें।