फ़ोकस सिस्टम

फ़ोकस सिस्टम, Blockly एडिटर में उपयोगकर्ता की जगह (फ़ोकस) को ट्रैक करता है. इसका इस्तेमाल Blockly और कस्टम कोड करते हैं. इससे यह पता चलता है कि फ़िलहाल किस कॉम्पोनेंट (ब्लॉक, फ़ील्ड, टूलबॉक्स कैटगरी वगैरह) पर फ़ोकस है. साथ ही, इससे फ़ोकस को किसी दूसरे कॉम्पोनेंट पर ले जाया जा सकता है.

फ़ोकस सिस्टम को समझना ज़रूरी है, ताकि यह पक्का किया जा सके कि आपका कस्टम कोड इसके साथ सही तरीके से काम करता है.

आर्किटेक्चर

फ़ोकस सिस्टम में तीन हिस्से होते हैं:

• FocusManager एक सिंगलटन है, जो Blockly के सभी हिस्सों पर फ़ोकस को मैनेज करता है. इसका इस्तेमाल Blockly और कस्टम कोड करते हैं. इससे यह पता चलता है कि Blockly का फ़ोकस किस कॉम्पोनेंट पर है. साथ ही, इससे Blockly के फ़ोकस को किसी दूसरे कॉम्पोनेंट पर ले जाया जा सकता है. यह DOM फ़ोकस इवेंट को भी मॉनिटर करता है. साथ ही, Blockly फ़ोकस और DOM फ़ोकस को सिंक करता है. इसके अलावा, यह उन सीएसएस क्लास को मैनेज करता है जिनसे पता चलता है कि किस कॉम्पोनेंट पर फ़ोकस किया गया है.

  फ़ोकस मैनेजर का इस्तेमाल मुख्य रूप से Blockly करता है. कभी-कभी इसका इस्तेमाल कस्टम कोड, फ़ोकस सिस्टम के साथ इंटरैक्ट करने के लिए करता है.

• IFocusableTree, Blockly एडिटर का एक इंडिपेंडेंट एरिया होता है. जैसे, वर्कस्पेस या टूलबॉक्स. इसमें फ़ोकस किए जा सकने वाले नोड होते हैं, जैसे कि ब्लॉक और फ़ील्ड. ट्री में सबट्री भी हो सकते हैं. उदाहरण के लिए, मुख्य वर्कस्पेस में मौजूद किसी ब्लॉक पर म्यूटेटर वर्कस्पेस, मुख्य वर्कस्पेस का सबट्री होता है.

  IFocusableTree का इस्तेमाल मुख्य तौर पर फ़ोकस मैनेजर करता है. अगर आपने कस्टम टूलबॉक्स नहीं बनाया है, तो आपको इसे लागू करने की ज़रूरत नहीं पड़ेगी.

• IFocusableNode, Blockly का एक कॉम्पोनेंट है. इस पर फ़ोकस किया जा सकता है. जैसे, ब्लॉक, फ़ील्ड या टूलबॉक्स कैटगरी. फ़ोकस किए जा सकने वाले नोड में एक डीओएम एलिमेंट होता है. यह नोड को दिखाता है. साथ ही, जब नोड में Blockly फ़ोकस होता है, तब इसमें डीओएम फ़ोकस होता है. ध्यान दें कि ट्री भी फ़ोकस किए जा सकने वाले नोड होते हैं. उदाहरण के लिए, पूरे वर्कस्पेस पर फ़ोकस किया जा सकता है.

  IFocusableNode में मौजूद तरीकों को मुख्य रूप से फ़ोकस मैनेजर कॉल करता है.

  IFocusableNode का इस्तेमाल, उस कॉम्पोनेंट को दिखाने के लिए किया जाता है जिस पर फ़ोकस किया गया है. उदाहरण के लिए, जब कोई उपयोगकर्ता किसी ब्लॉक के संदर्भ मेन्यू में कोई आइटम चुनता है, तो ब्लॉक को आइटम के कॉलबैक फ़ंक्शन में IFocusableNode के तौर पर पास किया जाता है.

  अगर कस्टम कॉम्पोनेंट लिखे जाते हैं, तो आपको लागू करना IFocusableNode पड़ सकता है.

फ़ोकस के टाइप

फ़ोकस सिस्टम, कई तरह के फ़ोकस तय करता है.

Blockly फ़ोकस और डीओएम फ़ोकस

फ़ोकस दो तरह के होते हैं: Blockly फ़ोकस और DOM फ़ोकस.

• Blockly फ़ोकस से पता चलता है कि Blockly के किस कॉम्पोनेंट (ब्लॉक, फ़ील्ड, टूलबॉक्स कैटगरी वगैरह) पर फ़ोकस किया गया है. Blockly कॉम्पोनेंट के लेवल पर काम करने के लिए, यह ज़रूरी है. उदाहरण के लिए, कीबोर्ड नेविगेशन प्लगिन की मदद से उपयोगकर्ता, ऐरो वाले बटन का इस्तेमाल करके एक कॉम्पोनेंट से दूसरे कॉम्पोनेंट पर जा सकते हैं. जैसे, किसी ब्लॉक से किसी फ़ील्ड पर जाना. इसी तरह, कॉन्टेक्स्ट मेन्यू सिस्टम ऐसा मेन्यू बनाता है जो मौजूदा कॉम्पोनेंट के लिए सही हो. इसका मतलब है कि यह वर्कस्पेस, ब्लॉक, और वर्कस्पेस की टिप्पणियों के लिए अलग-अलग मेन्यू बनाता है.

• डीओएम फ़ोकस से पता चलता है कि किस डीओएम एलिमेंट पर फ़ोकस है. डीओएम एलिमेंट के लेवल पर काम करने के लिए, यह ज़रूरी है. उदाहरण के लिए, स्क्रीन रीडर, उस एलिमेंट के बारे में जानकारी देते हैं जिस पर फ़िलहाल DOM फ़ोकस है. साथ ही, टैब DOM एलिमेंट से DOM एलिमेंट पर जाते हैं (फ़ोकस बदलते हैं).

फ़ोकस मैनेजर, Blockly फ़ोकस और DOM फ़ोकस को सिंक रखता है. इसलिए, जब किसी नोड (Blockly कॉम्पोनेंट) में Blockly फ़ोकस होता है, तो उसके नीचे मौजूद DOM एलिमेंट में DOM फ़ोकस होता है. इसके उलट भी ऐसा ही होता है.

ऐक्टिव और पैसिव फ़ोकस

Blockly में फ़ोकस को ऐक्टिव फ़ोकस और पैसिव फ़ोकस में बांटा गया है. ऐक्टिव फ़ोकस का मतलब है कि नोड को उपयोगकर्ता का इनपुट मिलेगा. जैसे, कोई बटन दबाना. पैसिव फ़ोकस का मतलब है कि किसी नोड पर पहले फ़ोकस था, लेकिन जब उपयोगकर्ता किसी दूसरे ट्री में मौजूद नोड पर चला गया, तब फ़ोकस हट गया. उदाहरण के लिए, जब उपयोगकर्ता वर्कस्पेस से टूलबॉक्स पर चला गया या Blockly एडिटर से पूरी तरह हट गया. अगर ट्री को फिर से फ़ोकस मिलता है, तो पैसिव फ़ोकस वाले नोड को ऐक्टिव फ़ोकस मिल जाएगा.

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

फ़ोकस मैनेजर, फ़ोकस किए गए नोड के लिए अलग-अलग हाइलाइट (सीएसएस क्लास) का इस्तेमाल करता है. इनसे लोगों को यह समझने में मदद मिलती है कि वे कहां हैं और उन्हें कहां वापस जाना है.

एफ़ेमेरल फ़ोकस

एक और तरह का फ़ोकस होता है, जिसे कुछ समय के लिए फ़ोकस कहा जाता है. डायलॉग या फ़ील्ड एडिटर जैसे अलग-अलग वर्कफ़्लो, फ़ोकस मैनेजर से कुछ समय के लिए फ़ोकस करने का अनुरोध करते हैं. जब फ़ोकस मैनेजर, अल्पकालिक फ़ोकस की अनुमति देता है, तो वह फ़ोकस सिस्टम को निलंबित कर देता है. व्यवहारिक तौर पर, इसका मतलब है कि इस तरह के वर्कफ़्लो, DOM फ़ोकस इवेंट को कैप्चर कर सकते हैं और उन पर कार्रवाई कर सकते हैं. इसके लिए, उन्हें यह चिंता करने की ज़रूरत नहीं है कि फ़ोकस सिस्टम भी उन पर कार्रवाई कर सकता है.

जब फ़ोकस मैनेजर, कुछ समय के लिए फ़ोकस करने की अनुमति देता है, तो वह फ़ोकस किए जा रहे नोड को पैसिव फ़ोकस में बदल देता है. यह फ़ोकस को वापस लाने पर, ऐक्टिव फ़ोकस को पहले जैसा कर देता है.

उदाहरण

यहां दिए गए उदाहरणों में बताया गया है कि Blockly, फ़ोकस सिस्टम का इस्तेमाल कैसे करता है. इनसे आपको यह समझने में मदद मिलनी चाहिए कि आपका कोड, फ़ोकस सिस्टम में कैसे फ़िट होता है और आपका कोड, फ़ोकस सिस्टम का इस्तेमाल कैसे कर सकता है.

कीबोर्ड की मदद से फ़ोकस को दूसरी जगह ले जाना

मान लें कि दो फ़ील्ड वाले ब्लॉक पर Blockly फ़ोकस है. इसे ब्लॉक के DOM एलिमेंट पर हाइलाइट (सीएसएस क्लास) के तौर पर दिखाया गया है. अब मान लें कि उपयोगकर्ता ने राइट ऐरो दबाया है:

1. कीबोर्ड नेविगेशन प्लगिन:
   • यह मुख्य इवेंट को दबाने की सूचना देता है.
   • यह नेविगेशन सिस्टम (Blockly का एक हिस्सा) से, फ़ोकस को "अगले" कॉम्पोनेंट पर ले जाने के लिए कहता है.
2. नेविगेशन सिस्टम:
   • यह फ़ोकस मैनेजर से पूछता है कि Blockly के किस कॉम्पोनेंट पर फ़ोकस है. फ़ोकस मैनेजर, ब्लॉक को IFocusableNode के तौर पर दिखाता है.
   • यह तय करता है कि IFocusableNode एक BlockSvg है और ब्लॉक पर नेविगेट करने के नियमों को देखता है. इन नियमों के मुताबिक, इसे Blockly फ़ोकस को पूरे ब्लॉक से ब्लॉक के पहले फ़ील्ड पर ले जाना चाहिए.
   • यह फ़ोकस मैनेजर को, Blockly के फ़ोकस को पहले फ़ील्ड पर ले जाने के लिए कहता है.
3. फ़ोकस मैनेजर:
   • यह अपनी स्थिति को अपडेट करता है, ताकि Blockly का फ़ोकस पहले फ़ील्ड पर सेट किया जा सके.
   • यह फ़ील्ड के डीओएम एलिमेंट पर डीओएम फ़ोकस सेट करता है.
   • यह ब्लॉक के एलिमेंट से फ़ील्ड के एलिमेंट में हाइलाइट क्लास को ले जाता है.

माउस से फ़ोकस को दूसरी जगह ले जाना

अब मान लें कि उपयोगकर्ता ब्लॉक के दूसरे फ़ील्ड पर क्लिक करता है. फ़ोकस मैनेजर:

1. पहले फ़ील्ड के डीओएम एलिमेंट पर focusout इवेंट और दूसरे फ़ील्ड के डीओएम एलिमेंट पर focusin इवेंट मिलता है.
2. इस कुकी से यह तय होता है कि फ़ोकस किया गया डीओएम एलिमेंट, दूसरे फ़ील्ड से मेल खाता है.
3. यह अपनी स्थिति को अपडेट करता है, ताकि Blockly का फ़ोकस दूसरे फ़ील्ड पर सेट हो जाए. (फ़ोकस मैनेजर को DOM फ़ोकस सेट करने की ज़रूरत नहीं है, क्योंकि ब्राउज़र पहले ही ऐसा कर चुका है.)
4. इस कुकी का इस्तेमाल, हाइलाइट क्लास को पहले फ़ील्ड के एलिमेंट से दूसरे फ़ील्ड के एलिमेंट पर ले जाने के लिए किया जाता है.

अन्य उदाहरण

यहाँ कुछ और उदाहरण दिए गए हैं:

• जब कोई उपयोगकर्ता, टूलबॉक्स से किसी ब्लॉक को वर्कस्पेस में खींचता है, तो माउस इवेंट हैंडलर एक नया ब्लॉक बनाता है. साथ ही, फ़ोकस मैनेजर को कॉल करके, उस ब्लॉक पर Blockly फ़ोकस सेट करता है.

• किसी ब्लॉक को मिटाने पर, उसका dispose तरीका, फ़ोकस मैनेजर को कॉल करता है, ताकि फ़ोकस को ब्लॉक के पैरंट पर ले जाया जा सके.

• कीबोर्ड शॉर्टकट, IFocusableNode का इस्तेमाल करके उस Blockly कॉम्पोनेंट की पहचान करते हैं जिस पर शॉर्टकट लागू होता है.

• संदर्भ मेन्यू, IFocusableNode का इस्तेमाल करते हैं. इससे उस Blockly कॉम्पोनेंट की पहचान की जाती है जिस पर मेन्यू को चालू किया गया था.

कस्टमाइज़ेशन और फ़ोकस सिस्टम

Blockly को पसंद के मुताबिक बनाने के दौरान, आपको यह पक्का करना होगा कि आपका कोड, फ़ोकस सिस्टम के साथ सही तरीके से काम करता हो. फ़ोकस सिस्टम का इस्तेमाल, फ़िलहाल फ़ोकस किए गए नोड की पहचान करने और उसे सेट करने के लिए भी किया जा सकता है.

कस्टम ब्लॉक और टूलबॉक्स का कॉन्टेंट

Blockly को पसंद के मुताबिक बनाने का सबसे सामान्य तरीका, कस्टम ब्लॉक तय करना और टूलबॉक्स के कॉन्टेंट को पसंद के मुताबिक बनाना है. इनमें से किसी भी कार्रवाई का फ़ोकस सिस्टम पर कोई असर नहीं पड़ता.

कस्टम क्लास

कस्टम क्लास को एक या दोनों फ़ोकस इंटरफ़ेस (IFocusableTree और IFocusableNode) लागू करने पड़ सकते हैं. यह हमेशा साफ़ तौर पर नहीं पता चलता कि ऐसा कब होता है.

कुछ क्लास के लिए, फ़ोकस इंटरफ़ेस लागू करना ज़रूरी है. इनमें शामिल हैं:

• यह क्लास, कस्टम टूलबॉक्स लागू करती है. इस क्लास को IFocusableTree और IFocusableNode लागू करना होगा.

• ऐसी क्लास जो दिखने वाला कॉम्पोनेंट (जैसे कि फ़ील्ड या आइकॉन) बनाती हैं. उपयोगकर्ता इन कॉम्पोनेंट पर जा सकते हैं. इन क्लास को IFocusableNode लागू करना होगा.

कुछ क्लास को IFocusableNode लागू करने की ज़रूरत होती है. भले ही, वे कोई दिखने वाला कॉम्पोनेंट न बनाएं या वे ऐसा दिखने वाला कॉम्पोनेंट बनाएं जिस पर उपयोगकर्ता नेविगेट न कर सकें. इनमें शामिल हैं:

• IFocusableNode को एक्सटेंड करने वाले इंटरफ़ेस को लागू करने वाली क्लास.

  उदाहरण के लिए, कीबोर्ड नेविगेशन प्लगिन में मौजूद 'ले जाएं' आइकॉन में चार दिशाओं वाला ऐरो दिखता है. इससे पता चलता है कि ऐरो वाले बटन की मदद से ब्लॉक को ले जाया जा सकता है. आइकॉन नहीं दिखता (चार दिशाओं वाला ऐरो एक बबल है) और उपयोगकर्ता इस पर नहीं जा सकते. हालांकि, आइकॉन को IFocusableNode लागू करना होगा, क्योंकि आइकॉन IIcon लागू करते हैं और IIcon, IFocusableNode को बढ़ाता है.

• ऐसे एपीआई में इस्तेमाल की गई क्लास जिनके लिए IFocusableNode की ज़रूरत होती है.

  उदाहरण के लिए, FlyoutSeparator क्लास, फ़्लायआउट में मौजूद दो आइटम के बीच अंतर पैदा करती है. यह कोई DOM एलिमेंट नहीं बनाता. इसलिए, इसमें कोई दिखने वाला कॉम्पोनेंट नहीं होता और उपयोगकर्ता इस पर नेविगेट नहीं कर सकते. हालांकि, इसे IFocusableNode लागू करना होगा, क्योंकि यह FlyoutItem में सेव होता है और FlyoutItem कंस्ट्रक्टर के लिए IFocusableNode की ज़रूरत होती है.

• ऐसी क्लास जो IFocusableNode को लागू करने वाली क्लास को एक्सटेंड करती हैं.

  उदाहरण के लिए, ToolboxSeparator, ToolboxItem को बढ़ाता है. यह IFocusableNode को लागू करता है. टूलबॉक्स सेपरेटर में दिखने वाला कॉम्पोनेंट होता है. हालांकि, उपयोगकर्ता इन पर नेविगेट नहीं कर सकते, क्योंकि इन पर कोई कार्रवाई नहीं की जा सकती और इनमें कोई काम का कॉन्टेंट नहीं होता.

अन्य क्लास ऐसे कॉम्पोनेंट बनाती हैं जिन्हें उपयोगकर्ता देख सकता है और उन पर नेविगेट कर सकता है. हालांकि, उन्हें IFocusableNode लागू करने की ज़रूरत नहीं होती. इनमें शामिल हैं:

• ऐसी क्लास जो दिखने वाला कॉम्पोनेंट बनाती हैं और खुद ही फ़ोकस मैनेज करती हैं. जैसे, फ़ील्ड एडिटर या डायलॉग. (ध्यान दें कि ऐसी क्लास को शुरू होने पर कुछ समय के लिए फ़ोकस लेना होता है और खत्म होने पर इसे वापस करना होता है. WidgetDiv या DropDownDiv का इस्तेमाल करने पर, यह काम अपने-आप हो जाएगा.)

आखिर में, कुछ क्लास फ़ोकस सिस्टम के साथ इंटरैक्ट नहीं करती हैं. इसलिए, उन्हें IFocusableTree या IFocusableNode लागू करने की ज़रूरत नहीं होती. इनमें शामिल हैं:

• ऐसी क्लास जो एक ऐसा कॉम्पोनेंट बनाती हैं जिसे उपयोगकर्ता देख तो सकते हैं, लेकिन उस पर नेविगेट नहीं कर सकते या कोई कार्रवाई नहीं कर सकते. साथ ही, इसमें ऐसी कोई जानकारी नहीं होती जिसका इस्तेमाल स्क्रीन रीडर कर सके. उदाहरण के लिए, किसी गेम में सिर्फ़ सजावटी बैकग्राउंड.

• ऐसी क्लास जो फ़ोकस सिस्टम से पूरी तरह से जुड़ी नहीं हैं. जैसे, ऐसी क्लास जो IMetricsManager या IVariableMap लागू करती हैं.

अगर आपको यह नहीं पता कि आपकी क्लास, फ़ोकस सिस्टम के साथ इंटरैक्ट करेगी या नहीं, तो कीबोर्ड नेविगेशन प्लगिन की मदद से इसे टेस्ट करें. अगर ऐसा नहीं होता है, तो आपको IFocusableTree या IFocusableNode लागू करना पड़ सकता है. अगर यह जांच पास हो जाती है, लेकिन आपको अब भी यकीन नहीं है, तो अपनी क्लास का इस्तेमाल करने वाला कोड पढ़ें. इससे आपको पता चलेगा कि किसी इंटरफ़ेस की ज़रूरत है या नहीं या कोई अन्य इंटरैक्शन है या नहीं.

फ़ोकस इंटरफ़ेस लागू करना

IFocusableTree या IFocusableNode को लागू करने का सबसे आसान तरीका यह है कि आप उस क्लास को बढ़ाएं जो इन इंटरफ़ेस को लागू करती है. उदाहरण के लिए, अगर आपको कस्टम टूलबॉक्स बनाना है, तो Toolbox को बढ़ाएं. यह IFocusableTree और IFocusableNode को लागू करता है. अगर आपको कोई कस्टम फ़ील्ड बनाना है, तो Field को बढ़ाएं. यह IFocusableNode को लागू करता है. पक्का करें कि आपका कोड, बेस क्लास में मौजूद फ़ोकस इंटरफ़ेस कोड में कोई रुकावट न डाले.

अगर आपने किसी ऐसी क्लास को एक्सटेंड किया है जो फ़ोकस इंटरफ़ेस लागू करती है, तो आम तौर पर आपको किसी भी तरीके को ओवरराइड करने की ज़रूरत नहीं होगी. सबसे आम अपवाद IFocusableNode.canBeFocused है. अगर आपको उपयोगकर्ताओं को अपने कॉम्पोनेंट पर नेविगेट करने से रोकना है, तो आपको इसे खारिज करना होगा.

फ़ोकस कॉलबैक के तरीकों (onTreeFocus और onTreeBlur in IFocusableTree and onNodeFocus and onNodeBlur in IFocusableNode) को ओवरराइड करने की ज़रूरत कम ही पड़ती है. ध्यान दें कि इन तरीकों से फ़ोकस बदलने (FocusManager.focusNode या FocusManager.focusTree को कॉल करें) की कोशिश करने पर, एक अपवाद मिलता है.

अगर आपको कस्टम कॉम्पोनेंट को शुरुआत से लिखना है, तो आपको फ़ोकस इंटरफ़ेस खुद लागू करने होंगे. ज़्यादा जानकारी के लिए, IFocusableTree और IFocusableNode के रेफ़रंस दस्तावेज़ देखें.

अपनी क्लास लागू करने के बाद, कीबोर्ड नेविगेशन प्लगिन के साथ इसकी जांच करें. इससे यह पुष्टि की जा सकेगी कि आपके कॉम्पोनेंट पर नेविगेट किया जा सकता है या नहीं.

फ़ोकस मैनेजर का इस्तेमाल करना

कुछ कस्टम क्लास, फ़ोकस मैनेजर का इस्तेमाल करती हैं. ऐसा करने की सबसे सामान्य वजहें ये हैं: फ़िलहाल फ़ोकस किए गए नोड को पाना और किसी दूसरे नोड पर फ़ोकस करना. फ़ोकस मैनेजर से संपर्क करने के लिए, Blockly.getFocusManager पर कॉल करें:

const focusManager = Blockly.getFocusManager();

फ़िलहाल फ़ोकस किए गए नोड को पाने के लिए, getFocusedNode को कॉल करें:

const focusedNode = focusManager.getFocusedNode();
// Do something with the focused node.

फ़ोकस को किसी दूसरे नोड पर ले जाने के लिए, focusNode को कॉल करें:

// Move focus to a different block.
focusManager.focusNode(myOtherBlock);

फ़ोकस को किसी ट्री पर ले जाने के लिए, focusTree को कॉल करें. इससे नोड का फ़ोकस, ट्री के रूट नोड पर भी सेट हो जाता है.

// Move focus to the main workspace.
focusManager.focusTree(myMainWorkspace);

फ़ोकस मैनेजर का इस्तेमाल करने की दूसरी आम वजह, कुछ समय के लिए फ़ोकस लेना और उसे वापस करना है. takeEphemeralFocus फ़ंक्शन, एक लैम्डा दिखाता है. आपको इसे कॉल करना होगा, ताकि फ़ोकस को कुछ समय के लिए वापस लाया जा सके.

const returnEphemeralFocus = focusManager.takeEphemeralFocus();
// Do something.
returnEphemeralFocus();

अगर WidgetDiv या DropDownDiv का इस्तेमाल किया जाता है, तो ये आपके लिए कुछ समय के लिए फ़ोकस करने की सुविधा को मैनेज करेंगे.

टैब स्टॉप

फ़ोकस सिस्टम, सभी ट्री के रूट एलिमेंट पर टैब स्टॉप (tabindex में से 0) सेट करता है. जैसे, मुख्य वर्कस्पेस, टूलबॉक्स, और फ़्लायआउट वर्कस्पेस. इससे उपयोगकर्ता, Blockly एडिटर के मुख्य सेक्शन में जाने के लिए Tab बटन का इस्तेमाल कर सकते हैं. इसके बाद, कीबोर्ड नेविगेशन प्लगिन का इस्तेमाल करके, उन सेक्शन में जाने के लिए ऐरो बटन का इस्तेमाल कर सकते हैं. इन टैब स्टॉप को न बदलें, क्योंकि इससे फ़ोकस मैनेजर की इन्हें मैनेज करने की क्षमता में रुकावट आएगी.

आपको आम तौर पर Blockly के इस्तेमाल किए गए अन्य DOM एलिमेंट पर टैब स्टॉप सेट करने से बचना चाहिए. ऐसा इसलिए, क्योंकि इससे Blockly के उस मॉडल में रुकावट आती है जिसमें टैब कुंजी का इस्तेमाल करके, एडिटर के अलग-अलग हिस्सों के बीच नेविगेट किया जाता है. साथ ही, उन हिस्सों में ऐरो कुंजियों का इस्तेमाल किया जाता है. इसके अलावा, ऐसा हो सकता है कि इस तरह के टैब स्टॉप ठीक से काम न करें. ऐसा इसलिए है, क्योंकि फ़ोकस किए जा सकने वाले हर नोड में, DOM एलिमेंट को फ़ोकस किए जा सकने वाले एलिमेंट के तौर पर एलान किया जाता है. अगर आपने फ़ोकस किए जा सकने वाले एलिमेंट के डिसेंडेंट पर टैब स्टॉप सेट किया है और उपयोगकर्ता उस एलिमेंट पर टैब करता है, तो फ़ोकस मैनेजर, DOM फ़ोकस को फ़ोकस किए जा सकने वाले एलिमेंट पर ले जाएगा.

आपके ऐप्लिकेशन में, Blockly एडिटर से बाहर मौजूद एलिमेंट पर टैब स्टॉप सेट करना सुरक्षित है. जब उपयोगकर्ता, एडिटर से ऐसे एलिमेंट पर टैब करता है, तो फ़ोकस मैनेजर, Blockly के फ़ोकस को ऐक्टिव से पैसिव में बदल देता है. सुलभता के लिए, आपको tabindex प्रॉपर्टी को 0 या -1 पर सेट करना चाहिए. ऐसा MDN में tabindex एट्रिब्यूट के ब्यौरे में दी गई चेतावनी में सुझाया गया है.

डीओएम फ़ोकस

सुलभता से जुड़ी वजहों से, ऐप्लिकेशन को डीओएम एलिमेंट पर focus तरीके को कॉल करने से बचना चाहिए. स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए, यह समस्या पैदा करती है. ऐसा इसलिए, क्योंकि उन्हें अचानक ऐप्लिकेशन में किसी अनजान जगह पर ले जाया जाता है.

एक और समस्या यह है कि फ़ोकस मैनेजर, फ़ोकस इवेंट पर प्रतिक्रिया देता है. इसके लिए, वह फ़ोकस किए गए एलिमेंट के सबसे नज़दीकी पूर्वज या खुद पर DOM फ़ोकस सेट करता है. यह एक ऐसा एलिमेंट होता है जिसे फ़ोकस किया जा सकता है. यह उस एलिमेंट से अलग हो सकता है जिस पर focus को कॉल किया गया था. (अगर फ़ोकस किए जा सकने वाले सबसे नज़दीकी पूर्वज या खुद पर फ़ोकस नहीं किया जा सकता है, तो फ़ोकस मैनेजर सिर्फ़ फ़ोकस किए गए नोड को पैसिव फ़ोकस में बदल देता है. ऐसा तब होता है, जब Blockly एडिटर के बाहर किसी एलिमेंट पर focus को कॉल किया जाता है.)

पोज़ीशन किए जा सकने वाले एलिमेंट

पोज़ीशन किए जा सकने वाले कॉम्पोनेंट, वर्कस्पेस के ऊपर मौजूद होते हैं. साथ ही, ये IPositionable को लागू करते हैं. उदाहरण के लिए, बैकपैक प्लगिन में मौजूद ट्रैशकैन और बैकपैक. फ़िलहाल, फ़ोकस सिस्टम में पोजीशन सेट करने की सुविधा इंटिग्रेट नहीं की गई है.