ระบบโฟกัส

ระบบโฟกัสจะติดตามตำแหน่ง (โฟกัส) ของผู้ใช้ในโปรแกรมแก้ไข Blockly Blockly และโค้ดที่กำหนดเองใช้แอตทริบิวต์นี้เพื่อระบุว่าคอมโพเนนต์ใด (บล็อก ฟิลด์ หมวดหมู่กล่องเครื่องมือ ฯลฯ) กำลังโฟกัสอยู่ และเพื่อย้ายโฟกัสไปยังคอมโพเนนต์อื่น

คุณควรทําความเข้าใจระบบโฟกัสเพื่อให้แน่ใจว่าโค้ดที่กําหนดเองทํางานได้อย่างถูกต้อง

สถาปัตยกรรม

ระบบโฟกัสมี 3 ส่วน ได้แก่

• FocusManager เป็น Singleton ที่ประสานงานโฟกัสใน Blockly ทั้งหมด Blockly และโค้ดที่กำหนดเองใช้เพื่อค้นหาว่าคอมโพเนนต์ใด มีโฟกัสของ Blockly รวมถึงย้ายโฟกัสของ Blockly ไปยังคอมโพเนนต์อื่น นอกจากนี้ ยังรอรับเหตุการณ์โฟกัส DOM, ซิงค์โฟกัส Blockly และโฟกัส DOM รวมถึงจัดการคลาส CSS ที่ระบุคอมโพเนนต์ที่มี โฟกัส

  Blockly ใช้ Focus Manager เป็นหลัก บางครั้งโค้ดที่กำหนดเองจะใช้เพื่อโต้ตอบกับระบบโฟกัส

• IFocusableTree คือพื้นที่อิสระของโปรแกรมแก้ไข Blockly เช่น พื้นที่ทํางานหรือกล่องเครื่องมือ ประกอบด้วยโหนดที่โฟกัสได้ เช่น บล็อกและ ฟิลด์ นอกจากนี้ ต้นไม้ยังมีกิ่งก้านได้ด้วย เช่น พื้นที่ทำงานของ Mutator ใน บล็อกในพื้นที่ทำงานหลักคือ Subtree ของพื้นที่ทำงานหลัก

  IFocusableTree ใช้โดย Focus Manager เป็นหลัก คุณอาจไม่จำเป็นต้องติดตั้งใช้งานเว้นแต่จะเขียนกล่องเครื่องมือที่กำหนดเอง

• IFocusableNode คือคอมโพเนนต์ Blockly ที่สามารถมีโฟกัสได้ เช่น บล็อก ฟิลด์ หรือหมวดหมู่กล่องเครื่องมือ โหนดที่โฟกัสได้มีองค์ประกอบ DOM ที่ แสดงโหนดและมีโฟกัส DOM เมื่อโหนดมีโฟกัส Blockly โปรดทราบว่าทรียังเป็นโหนดที่โฟกัสได้ด้วย เช่น คุณสามารถมุ่งเน้นไปที่พื้นที่ทำงานโดยรวมได้

  โดยปกติแล้วโฟกัสแมเนเจอร์จะเป็นผู้เรียกใช้เมธอดใน IFocusableNode

  IFocusableNode เองใช้เพื่อแสดงคอมโพเนนต์ที่มีโฟกัส เช่น เมื่อผู้ใช้เลือกรายการในเมนูตามบริบทของบล็อก ระบบจะส่ง บล็อกไปยังฟังก์ชันเรียกกลับของรายการเป็น IFocusableNode

  หากเขียนคอมโพเนนต์ที่กำหนดเอง คุณอาจต้องติดตั้งใช้งาน IFocusableNode

ประเภทโฟกัส

ระบบโฟกัสจะกำหนดโฟกัสประเภทต่างๆ

โฟกัส Blockly และโฟกัส DOM

โฟกัสมี 2 ประเภทหลักๆ ได้แก่ โฟกัส Blockly และโฟกัส DOM

• โฟกัส Blockly ระบุคอมโพเนนต์ Blockly (บล็อก ฟิลด์ กล่องเครื่องมือ หมวดหมู่ ฯลฯ) ที่มีโฟกัส ซึ่งจำเป็นสำหรับการทำงานในระดับคอมโพเนนต์ Blockly ตัวอย่างเช่น ปลั๊กอินการนำทางด้วยแป้นพิมพ์ช่วยให้ผู้ใช้ ใช้แป้นลูกศรเพื่อย้ายจากคอมโพเนนต์หนึ่งไปยังอีกคอมโพเนนต์หนึ่งได้ เช่น จากบล็อก ไปยังฟิลด์ ในทำนองเดียวกัน ระบบเมนูตามบริบทจะสร้างเมนูที่ เหมาะสมกับคอมโพเนนต์ปัจจุบัน นั่นคือจะสร้างเมนูที่แตกต่างกัน สำหรับพื้นที่ทำงาน บล็อก และความคิดเห็นในพื้นที่ทำงาน

• โฟกัส DOM ระบุองค์ประกอบ DOM ที่มีโฟกัส จำเป็นสำหรับการ ทำงานที่ระดับองค์ประกอบ DOM เช่น โปรแกรมอ่านหน้าจอจะ แสดงข้อมูลเกี่ยวกับองค์ประกอบที่ปัจจุบันมีโฟกัส DOM และแท็บจะ ย้าย (เปลี่ยนโฟกัส) จากองค์ประกอบ DOM ไปยังองค์ประกอบ DOM

Focus Manager จะซิงค์โฟกัสของ Blockly และโฟกัสของ DOM ไว้ด้วยกัน ดังนั้นเมื่อโหนด (คอมโพเนนต์ Blockly) มีโฟกัสของ Blockly องค์ประกอบ DOM พื้นฐานของโหนดนั้นจะมีโฟกัสของ DOM และในทางกลับกัน

การโฟกัสแบบแอ็กทีฟและแบบพาสซีฟ

โฟกัส Blockly จะแบ่งออกเป็นโฟกัสที่ใช้งานอยู่และโฟกัสแบบพาสซีฟ โฟกัสที่ใช้งานอยู่หมายความว่าโหนดจะรับอินพุตของผู้ใช้ เช่น การกดแป้น โฟกัสแบบพาสซีฟหมายความว่าโหนดเคยมีโฟกัสที่ใช้งานอยู่ แต่สูญเสียไปเมื่อผู้ใช้ย้ายไปยังโหนดในโครงสร้างอีกโครงสร้างหนึ่ง (เช่น ย้ายจากพื้นที่ทำงานไปยังกล่องเครื่องมือ) หรือออกจากโปรแกรมแก้ไข Blockly โดยสิ้นเชิง หาก ทรีกลับมาโฟกัสอีกครั้ง โหนดที่โฟกัสแบบพาสซีฟจะกลับมาโฟกัสแบบแอ็กทีฟ

แต่ละทรีมีบริบทโฟกัสแยกกัน กล่าวคือ โหนดในแผนผังมีโฟกัสได้มากที่สุด 1 โหนด การโฟกัสจะใช้งานอยู่หรือไม่ได้ใช้งานขึ้นอยู่กับว่า ทรีมีการโฟกัสหรือไม่ มีโหนดที่มีโฟกัสที่ใช้งานอยู่ได้สูงสุด 1 รายการในทั้งหน้า

Focus Manager ใช้ไฮไลต์ (คลาส CSS) ที่แตกต่างกันสำหรับโหนดที่โฟกัสอยู่และ โหนดที่ไม่ได้โฟกัส ซึ่งจะช่วยให้ผู้ใช้ทราบว่าตนเองอยู่ที่ใดและ จะกลับไปที่ใด

โฟกัสชั่วคราว

โฟกัสอีกประเภทหนึ่งเรียกว่าโฟกัสชั่วคราว เวิร์กโฟลว์ที่แยกกัน เช่น กล่องโต้ตอบหรือเอดิเตอร์ฟิลด์ จะขอโฟกัสชั่วคราวจากโฟกัส แมเนเจอร์ เมื่อ Focus Manager ให้โฟกัสชั่วคราว ระบบจะระงับโฟกัส ในทางปฏิบัติแล้ว เวิร์กโฟลว์ดังกล่าวจะบันทึกและดำเนินการกับเหตุการณ์โฟกัส DOM ได้โดยไม่ต้องกังวลว่าระบบโฟกัสอาจดำเนินการกับเหตุการณ์เหล่านั้นด้วย

เมื่อ Focus Manager ให้โฟกัสชั่วคราว ระบบจะเปลี่ยนโหนดที่โฟกัสอยู่ เป็นโฟกัสแบบพาสซีฟ ซึ่งจะกู้คืนโฟกัสที่ใช้งานอยู่เมื่อมีการส่งคืนโฟกัสชั่วคราว

ตัวอย่าง

ตัวอย่างต่อไปนี้จะแสดงวิธีที่ Blockly ใช้ระบบโฟกัส ซึ่งจะช่วยให้คุณเข้าใจว่าโค้ดของคุณเข้ากับระบบโฟกัสได้อย่างไรและโค้ดของคุณอาจใช้ระบบโฟกัสอย่างไร

ย้ายโฟกัสด้วยแป้นพิมพ์

สมมติว่าบล็อกที่มี 2 ฟิลด์มีโฟกัส Blockly ดังที่ระบุโดยการไฮไลต์ (คลาส CSS) ในองค์ประกอบ DOM ของบล็อก ตอนนี้สมมติว่าผู้ใช้กดลูกศรขวา

1. ปลั๊กอินการนำทางด้วยแป้นพิมพ์
   • รับเหตุการณ์การกดแป้น
   • ขอให้ระบบนำทาง (ส่วนหนึ่งของ Blockly หลัก) ย้ายโฟกัสไปยังคอมโพเนนต์ "ถัดไป"
2. ระบบนำทางมีลักษณะดังนี้
   • ถาม Focus Manager ว่าคอมโพเนนต์ใดมีโฟกัสของ Blockly Focus manager จะแสดงผลบล็อกเป็น IFocusableNode
   • กำหนดว่า IFocusableNode เป็น BlockSvg และดู กฎสำหรับการไปยังส่วนต่างๆ ของบล็อก ซึ่งระบุว่าควรย้ายโฟกัส Blockly จากบล็อกทั้งบล็อกไปยังช่องแรกในบล็อก
   • บอกให้ Focus Manager ย้ายโฟกัส Blockly ไปยังช่องแรก
3. ผู้จัดการโฟกัส
   • อัปเดตสถานะเพื่อตั้งค่าโฟกัส Blockly ในช่องแรก
   • ตั้งค่าโฟกัส DOM ในองค์ประกอบ DOM ของฟิลด์
   • ย้ายคลาสไฮไลต์จากองค์ประกอบของบล็อกไปยังองค์ประกอบของฟิลด์

ย้ายโฟกัสด้วยเมาส์

ตอนนี้สมมติว่าผู้ใช้คลิกช่องที่ 2 ในบล็อก โฟกัส ผู้จัดการ:

1. รับเหตุการณ์ DOM focusout ในองค์ประกอบ DOM ของช่องแรกและเหตุการณ์ focusin ในองค์ประกอบ DOM ของช่องที่สอง
2. กำหนดว่าองค์ประกอบ DOM ที่ได้รับโฟกัสสอดคล้องกับช่องที่ 2
3. อัปเดตสถานะเพื่อตั้งค่าโฟกัส Blockly ในช่องที่ 2 (Focus Manager ไม่จำเป็นต้องตั้งค่าโฟกัส DOM เนื่องจากเบราว์เซอร์ได้ดำเนินการนี้แล้ว)
4. ย้ายคลาสไฮไลต์จากองค์ประกอบของช่องแรกไปยังองค์ประกอบของช่องที่สอง

ตัวอย่างอื่นๆ

ตัวอย่างอื่นๆ มีดังนี้

• เมื่อผู้ใช้ลากบล็อกจากกล่องเครื่องมือไปยังพื้นที่ทํางาน ตัวแฮนเดิลเหตุการณ์ของเมาส์ จะสร้างบล็อกใหม่และเรียกใช้ตัวจัดการโฟกัสเพื่อตั้งค่าโฟกัสของ Blockly ในบล็อกนั้น

• เมื่อลบบล็อก เมธอด dispose จะเรียกตัวจัดการโฟกัสเพื่อ ย้ายโฟกัสไปยังบล็อกระดับบนสุด

• แป้นพิมพ์ลัดใช้ IFocusableNode เพื่อระบุคอมโพเนนต์ Blockly ที่แป้นพิมพ์ลัด ใช้

• เมนูตามบริบทใช้ IFocusableNode เพื่อระบุคอมโพเนนต์ Blockly ที่เรียกใช้เมนู

การปรับแต่งและระบบโฟกัส

เมื่อปรับแต่ง Blockly คุณต้องตรวจสอบว่าโค้ดทำงานได้อย่างถูกต้อง กับระบบโฟกัส นอกจากนี้ คุณยังใช้ระบบโฟกัสเพื่อระบุและตั้งค่า โหนดที่โฟกัสในปัจจุบันได้ด้วย

บล็อกที่กำหนดเองและเนื้อหาของกล่องเครื่องมือ

วิธีที่ใช้กันมากที่สุดในการปรับแต่ง Blockly คือการกำหนดบล็อกที่กำหนดเองและ ปรับแต่งเนื้อหาของกล่องเครื่องมือ การดำเนินการทั้ง 2 อย่างนี้ไม่มีผลต่อระบบโฟกัส

คลาสที่กำหนดเอง

คลาสที่กำหนดเองอาจต้องใช้โฟกัสอินเทอร์เฟซอย่างใดอย่างหนึ่งหรือทั้ง 2 อย่าง (IFocusableTree และ IFocusableNode) ซึ่งอาจไม่ชัดเจนเสมอไป

บางคลาสจำเป็นต้องใช้โฟกัสอินเทอร์เฟซอย่างชัดเจน ซึ่งได้แก่

• คลาสที่ใช้กล่องเครื่องมือที่กำหนดเอง คลาสนี้ต้องใช้ IFocusableTree และ IFocusableNode

• คลาสที่สร้างคอมโพเนนต์ที่มองเห็นได้ (เช่น ฟิลด์หรือไอคอน) ซึ่งผู้ใช้ ไปยังส่วนต่างๆ ได้ คลาสเหล่านี้ต้องใช้ IFocusableNode

บางคลาสต้องใช้ IFocusableNode แม้ว่าจะไม่ได้สร้างคอมโพเนนต์ที่มองเห็นได้หรือสร้างคอมโพเนนต์ที่มองเห็นได้ซึ่งผู้ใช้ไปยังส่วนต่างๆ ไม่ได้ก็ตาม ซึ่งได้แก่

• คลาสที่ใช้การติดตั้งอินเทอร์เฟซที่ขยาย IFocusableNode

  เช่น ไอคอนย้ายในปลั๊กอินการนำทางด้วยแป้นพิมพ์จะแสดง ลูกศรสี่ทิศที่บ่งบอกว่าย้ายบล็อกได้ด้วยปุ่มลูกศร ผู้ใช้จะไม่เห็นไอคอน (ลูกศรสี่ทิศเป็นบับเบิล) และ ไม่สามารถไปยังไอคอนดังกล่าวได้ อย่างไรก็ตาม ไอคอนต้องใช้IFocusableNode เนื่องจากไอคอนใช้IIcon และIIcon ขยายIFocusableNode

• คลาสที่ใช้ใน API ที่ต้องมี IFocusableNode

  เช่น คลาส FlyoutSeparator จะสร้างช่องว่างระหว่าง 2 รายการใน เมนูแบบลอย โดยจะไม่สร้างองค์ประกอบ 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 ใน IFocusableTree และ onNodeFocus และ onNodeBlur ใน IFocusableNode) นั้นพบได้น้อยกว่า โปรดทราบว่าการพยายามเปลี่ยนโฟกัส (เรียก FocusManager.focusNode หรือ FocusManager.focusTree) จากเมธอดเหล่านี้จะทำให้เกิดข้อยกเว้น

หากเขียนคอมโพเนนต์ที่กำหนดเองตั้งแต่ต้น คุณจะต้องใช้โฟกัส อินเทอร์เฟซด้วยตนเอง ดูข้อมูลเพิ่มเติมในเอกสารอ้างอิงสำหรับ IFocusableTree และ IFocusableNode

หลังจากที่ได้ใช้คลาสแล้ว ให้ทดสอบกับปลั๊กอินการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์เพื่อยืนยันว่าคุณไปยังคอมโพเนนต์ได้ (หรือไม่)

ใช้ตัวจัดการโฟกัส

คลาสที่กำหนดเองบางคลาสใช้ Focus Manager เหตุผลที่พบบ่อยที่สุดในการทำเช่นนี้ คือการรับโหนดที่โฟกัสอยู่ในปัจจุบันและโฟกัสที่โหนดอื่น หากต้องการรับ ผู้จัดการลูกค้า ให้โทรหา 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);

เหตุผลที่พบบ่อยอีกอย่างในการใช้ Focus Manager คือการรับและส่งคืนโฟกัสชั่วคราว ฟังก์ชัน takeEphemeralFocus จะแสดงผล Lambda ที่คุณต้องเรียกใช้เพื่อ แสดงผลโฟกัสชั่วคราว

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

หากคุณใช้ WidgetDiv หรือ DropDownDiv ระบบจะจัดการโฟกัสชั่วคราวให้คุณ

แท็บหยุด

ระบบโฟกัสจะตั้งแท็บหยุด (tabindex ของ 0) ในองค์ประกอบรูทของ ทุกทรี (พื้นที่ทำงานหลัก กล่องเครื่องมือ และพื้นที่ทำงานแบบฟลายเอาต์) ซึ่งช่วยให้ผู้ใช้ใช้ปุ่ม Tab เพื่อไปยังส่วนต่างๆ ในพื้นที่หลักของโปรแกรมแก้ไข Blockly แล้วใช้ปุ่มลูกศรเพื่อไปยังส่วนต่างๆ ภายในพื้นที่เหล่านั้น (โดยใช้ปลั๊กอินการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์) อย่าเปลี่ยนการหยุดแท็บเหล่านี้ เนื่องจากจะรบกวนความสามารถของตัวจัดการโฟกัสในการจัดการ

โดยทั่วไปแล้ว คุณควรหลีกเลี่ยงการตั้งค่าหยุดแท็บในองค์ประกอบ DOM อื่นๆ ที่ Blockly ใช้ เนื่องจากจะรบกวนโมเดลของ Blockly ในการใช้ปุ่ม Tab เพื่อ ไปยังส่วนต่างๆ ของเอดิเตอร์และปุ่มลูกศรภายในส่วนเหล่านั้น นอกจากนี้ แท็บหยุดดังกล่าวอาจไม่ทำงานตามที่ต้องการ เนื่องจากแต่ละ โฟกัสได้จะประกาศองค์ประกอบ DOM เป็นองค์ประกอบที่โฟกัสได้ หากคุณตั้งค่าแท็บ หยุดในองค์ประกอบย่อยขององค์ประกอบที่โฟกัสได้ และผู้ใช้กด Tab ไปยังองค์ประกอบนั้น Focus Manager จะย้ายโฟกัส DOM ไปยังองค์ประกอบที่โฟกัสได้ที่ประกาศไว้

คุณตั้งค่าการหยุดแท็บในองค์ประกอบในแอปพลิเคชันที่อยู่นอกเอดิเตอร์ Blockly ได้อย่างปลอดภัย เมื่อผู้ใช้กด Tab จากเอดิเตอร์ไปยังองค์ประกอบดังกล่าว Focus Manager จะเปลี่ยนโฟกัส Blockly จาก "ใช้งานอยู่" เป็น "ไม่ได้ใช้งาน" เพื่อการช่วยเหลือพิเศษ คุณควรตั้งค่าพร็อพเพอร์ตี้ tabindex เป็น 0 หรือ -1 ตามที่คำเตือนแนะนำไว้ในคำอธิบายของ tabindex แอตทริบิวต์ใน MDN

โฟกัส DOM

ด้วยเหตุผลด้านการช่วยเหลือพิเศษ แอปพลิเคชันควรหลีกเลี่ยงการเรียกใช้เมธอด focus ในองค์ประกอบ DOM ซึ่งทำให้ผู้ใช้โปรแกรมอ่านหน้าจอเกิดความสับสนเนื่องจากระบบจะ ย้ายผู้ใช้ไปยังตำแหน่งที่ไม่รู้จักในแอปพลิเคชันโดยฉับพลัน

ปัญหาเพิ่มเติมคือตัวจัดการโฟกัสจะตอบสนองต่อเหตุการณ์โฟกัสโดย ตั้งค่าโฟกัส DOM ให้กับบรรพบุรุษที่ใกล้ที่สุดหรือตัวขององค์ประกอบที่โฟกัสซึ่งเป็น องค์ประกอบที่ประกาศว่าโฟกัสได้ ซึ่งอาจแตกต่างจากองค์ประกอบที่เรียกใช้ focus (หากไม่มีบรรพบุรุษที่โฟกัสได้ที่ใกล้ที่สุดหรือตัวมันเอง เช่น เมื่อเรียกใช้ focus ในองค์ประกอบนอกโปรแกรมแก้ไข Blockly ตัวจัดการโฟกัสจะเปลี่ยนโหนดที่โฟกัสอยู่เป็นโฟกัสแบบพาสซีฟ)

Positionables

Positionable คือคอมโพเนนต์ที่วางอยู่ด้านบนของพื้นที่ทำงานและ ใช้IPositionable ตัวอย่างเช่น ถังขยะและกระเป๋าเป้ในปลั๊กอิน กระเป๋าเป้ ยังไม่ได้ผสานรวมองค์ประกอบที่จัดตำแหน่งได้เข้ากับระบบโฟกัส