फ़ोकस ट्रैप एक वेब एप्लिकेशन के भीतर एक बहुत ही महत्वपूर्ण एक्सेसिबिलिटी सुविधा है। इस पोस्ट में, मैं सबसे पहले आपको यह समझने में मदद करूंगा कि यह क्या है, फिर यह महत्वपूर्ण क्यों है, और अंत में, मैं दिखाऊंगा कि जहां आवश्यक हो, अपने एंगुलर ऐप्स के भीतर अवधारणा को जल्दी और आसानी से कैसे जोड़ें। और, यह एंगुलर सीडीके के लिए बहुत आसान है। ठीक है, चलिए इस पर आते हैं।   https://youtu.be/JKHAjYJ5T2o?embedable=true  यदि आप उन लोगों में से हैं जो विभिन्न उपकरणों के साथ वेब को आसानी से देख, सुन और उपयोग कर सकते हैं, तो एक्सेसिबिलिटी को समझना या इसके बारे में सोचना थोड़ा मुश्किल हो सकता है, इसलिए ऐसी चीजें बनाना भी आसान हो सकता है जो उन लोगों के लिए अच्छी तरह से काम नहीं करती हैं। नहीं कर सकता।  फोकस ट्रैप क्या है?  फोकस ट्रैप एक ऐसी सुविधा है जो इन लोगों के अनुभवों को बेहतर बनाने में मदद करती है। यह किसी दिए गए कंटेनर के भीतर उपयोगकर्ता फोकस को प्रबंधित करने का एक तरीका है।  उदाहरण के लिए, एक मोडल लें। यदि कोई उपयोगकर्ता फोकस प्रबंधित किए बिना एक मोडल खोलता है, तो जब वे टैब कुंजी का उपयोग करके कीबोर्ड के माध्यम से नेविगेट करना शुरू करते हैं, तो मोडल के पीछे के आइटम फोकस प्राप्त करना जारी रखते हैं। यह अजीब है और यह वह नहीं है जिसकी उपयोगकर्ता अपेक्षा करेगा, है ना? हमें उन्हें प्रोग्रामेटिक रूप से मोडल के भीतर केंद्रित करने की आवश्यकता है।  लेकिन यह पर्याप्त नहीं है; यदि हम यहां रुकते हैं, जैसे कि हम मोडल के माध्यम से टैब करते हैं, अंततः, हम सभी फोकस करने योग्य आइटमों के माध्यम से टैब करेंगे, और फिर, हम फिर से मोडल के पीछे मूल दस्तावेज़ के भीतर आइटम पर ध्यान केंद्रित करने पर वापस आ जाएंगे।  इसके बजाय हमें जो करने की ज़रूरत है वह फोकस को फंसाना है ताकि जब उपयोगकर्ता मोडल में अंतिम आइटम पर ध्यान केंद्रित करे, तो फोकस अगले टैब पर मोडल में पहले फोकस करने योग्य तत्व पर वापस रखा जाएगा।  ठीक है, अब जब हम जानते हैं कि फोकस ट्रैप क्या है, तो शायद हमें यह एहसास होने लगा है कि इस कार्यक्षमता को बनाने के लिए कुछ प्रयास करने होंगे, है ना?  खैर, एंगुलर के भीतर नहीं। सीडीके के साथ,   से   निर्देश का उपयोग करना बहुत आसान है। 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  इसलिए, यह न केवल वास्तव में सभी उपयोगकर्ताओं के लिए अत्यधिक उपयोगी है, बल्कि इसे लागू करना भी बहुत आसान है।  ध्यान देने योग्य एक आखिरी बात, ट्रैप फोकस निर्देश आरंभीकरण से पहले अंतिम केंद्रित तत्व का ट्रैक रखता है, इसलिए जब हम मोडल को बंद करते हैं, तो फोकस उस बटन पर वापस आ जाता है जिसने इसे खोला था।  बढ़िया, हमने बहुत सारा काम बचा लिया और अपने मॉडल को अधिक सुलभ बना दिया।  क्या आप इसे क्रियान्वित होते देखना चाहते हैं?  नीचे दिए गए स्टैकब्लिट्ज उदाहरण में इन तकनीकों के डेमो कोड और उदाहरण देखें। यदि आपका कोई प्रश्न या विचार है, तो टिप्पणी छोड़ने में संकोच न करें।   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

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

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

टेलीग्राम: क्रिप्टो द्वीप का मुख्य भूमि से पुल

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

टेलीग्राम: क्रिप्टो द्वीप का मुख्य भूमि से पुल

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps