ปัญหาเรื่อง Focus และการสนับสนุนการปรับปรุง
การสร้าง React components ที่เข้าถึงได้ (accessible) นั้นต้องทำมากกว่าแค่การเพิ่ม ARIA labels คุณต้องจัดการวิธีที่ผู้ใช้เคลื่อนที่ผ่านอินเทอร์เฟซด้วยคีย์บอร์ดด้วย
ผมกำลังบันทึกการเดินทางในการสร้าง navigation component ที่เข้าถึงได้อย่างสมบูรณ์ตั้งแต่เริ่มต้น ในการอัปเดตนี้ ผมจะเน้นไปที่สองส่วนหลัก ได้แก่ การแก้ไขปัญหา keyboard traps และการเตรียมความพร้อมสำหรับการจัดการ sublist ที่ราบรื่นยิ่งขึ้น
การแก้ไขปัญหา Keyboard Trap
ปัญหาที่พบบ่อยคือเมื่อผู้ใช้ใช้ Shift+Tab เพื่อเข้าสู่ component หาก focus ไปตกอยู่ที่ลิงก์ภายใน sublist ที่ปิดอยู่ เส้นขอบ focus (focus outline) จะหายไป ซึ่งถือเป็นข้อผิดพลาดร้ายแรงสำหรับผู้ใช้คีย์บอร์ด
เพื่อแก้ไขปัญหานี้ ผมจึงได้ปรับเปลี่ยนตรรกะ (logic) ดังนี้:
• หาก focus ไปถึง element สุดท้ายของ sublist ที่ปิดอยู่ ระบบจะเลื่อน focus ไปยังปุ่มหลัก (parent button) ในแถวบนสุด • ผมใช้ onFocus event listener เพื่อตรวจจับการเคลื่อนที่นี้โดยเฉพาะ • ตรรกะจะตรวจสอบว่า element ที่ถูก focus เป็นตัวสุดท้ายใน component หรือไม่ • หากใช่ โค้ดจะระบุ ancestor ในแถวบนสุดและย้าย focus ไปที่นั่น
สิ่งนี้ช่วยให้มั่นใจได้ว่าผู้ใช้จะไม่หลงตำแหน่งในอินเทอร์เฟซ
การตั้งค่าการปิด Sublist
เมื่อคุณปิดเมนูหลัก (parent menu) เมนูย่อย (submenus) ทั้งหมดที่เปิดอยู่ภายในควรจะปิดลงด้วย นี่คือหลักการทำงานของระบบปฏิบัติการมาตรฐานทั่วไป
เพื่อจัดการเรื่องนี้ใน React โดยไม่ให้เกิดปัญหาด้านประสิทธิภาพ ผมจึงหลีกเลี่ยงการเก็บ function ไว้ใน state เนื่องจากการเก็บ function ใน state จะทำให้เกิดการ re-render ที่ไม่จำเป็น
แต่ผมเลือกใช้วิธีอื่นแทน:
• ผมสร้าง Map ไว้ภายใน useRef • Map นี้จะเก็บ close functions ที่เชื่อมโยงกับ parent elements • เมื่อมีการเรียกใช้ navigation array ระบบจะฉีด (inject) function เหล่านี้เข้าไปใน objects • การใช้ Ref ช่วยให้ผมสามารถอัปเดตการเชื่อมต่อเหล่านี้ได้โดยไม่ทำให้เกิดการ re-render
สิ่งนี้เป็นการวางรากฐานสำหรับพฤติกรรมของเมนูที่เป็นระเบียบและคาดเดาได้
ลำดับถัดไป ผมจะเริ่มเขียนตรรกะจริงเพื่อปิด sublist เหล่านั้น
ที่มา: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l