แฟรกเมนต์ พอร์ทัล และกับดักลำดับ DOM

โปรแกรมอ่านหน้าจอและแป้นพิมพ์ทำตาม ลำดับ DOM ซึ่งคือลำดับที่องค์ประกอบปรากฏในเอกสาร CSS อาจย้ายองค์ประกอบในเชิงภาพได้ แต่ลำดับการอ่านจะไม่เปลี่ยน

React Fragment จัดกลุ่มองค์ประกอบลูกโดยไม่เพิ่ม div ที่ใช้ครอบ ทำให้ DOM สะอาดและป้องกันไม่ให้รายการหรือตารางเสียโครงสร้างจากองค์ประกอบที่เกินมา

div ที่เพิ่มเข้ามาภายในรายการหรือตารางอาจทำให้โครงสร้างแม่ลูกที่เทคโนโลยีสิ่งอำนวยความสะดวกคาดหวังไว้เสียหาย Fragment ช่วยหลีกเลี่ยงการซ้อนองค์ประกอบที่ไม่ถูกต้องนี้ได้ทั้งหมด

Portal แสดงองค์ประกอบลูกไปยังโหนด DOM อื่น ซึ่งมักเป็น document body วิธีนี้เป็นมาตรฐานสำหรับเมานต์โมดัลให้อยู่เหนือองค์ประกอบอื่นทั้งหมด

แม้มาร์กอัปจะไปปรากฏที่อื่น แต่ portal ยังคงอยู่ในโครงสร้างคอมโพเนนต์ของคุณ State และบริบทยังคงไหลตามปกติ ตรรกะจึงไม่ได้รับผลกระทบ

Portal ที่อยู่ท้าย body อาจปรากฏหลังเนื้อหาที่ไม่เกี่ยวข้อง การกด Tab อาจกระโดดไปยังตำแหน่งที่อยู่ห่างออกไป ดังนั้น การจัดการ focus จึงสำคัญอย่างยิ่งสำหรับ portal

เมื่อ portal เปิดขึ้น แป้นพิมพ์จะไม่ติดตามไปโดยอัตโนมัติ ให้ย้าย focus เข้าไปในโมดัลอย่างชัดเจน เพื่อให้ผู้ใช้อยู่ตรงกับเนื้อหาใหม่

ขณะที่โมดัลของ portal เปิดอยู่ ให้ Tab อยู่ภายในโมดัล เมื่อปิด ให้คืน focus ไปยังองค์ประกอบที่เปิดโมดัล เพราะความใกล้กันใน DOM จะไม่ทำสิ่งนี้ให้คุณ

ลำดับของ CSS flexbox หรือการจัดวางแบบกริดสามารถเปลี่ยนตำแหน่งบนหน้าจอได้ แต่ ลำดับ Tab ยังคงทำตามต้นฉบับ ดังนั้นควรหลีกเลี่ยงการจัดลำดับเนื้อหาแบบโต้ตอบใหม่ด้วย CSS

เขียน JSX ให้ ลำดับต้นฉบับ ตรงกับลำดับการอ่านที่สมเหตุสมผล จากนั้นทั้งผู้ใช้ที่มองเห็นและผู้ใช้โปรแกรมอ่านหน้าจอจะพบเนื้อหาในลำดับเดียวกัน

กด Tab ผ่านแอปและดูว่า focus ไปที่ใด หาก focus กระโดดไปยังตำแหน่งที่ไม่คาดคิด ลำดับ DOM หรือ portal ของคุณอาจต้องได้รับการแก้ไข

คุณเมานต์โมดัลด้วย portal ไปยัง document.body ความรับผิดชอบใหม่ที่เกิดขึ้นคืออะไร

ใช้ Fragments เพื่อหลีกเลี่ยงตัวครอบที่ไม่ถูกต้อง รักษาลำดับต้นฉบับให้สมเหตุสมผล และจัดการ focus อย่างระมัดระวังทุกครั้งที่ portal แสดงเนื้อหาในที่อื่น 🧩