𝗙𝗼𝗰𝘂𝘀 𝗜𝘀𝘀𝘂𝗲𝘀 𝗮𝗻𝗱 𝗥𝗲𝗳𝗶𝗻𝗲𝗺𝗲𝗻𝘁 𝗦𝘂𝗽𝗽𝗼𝗿𝘁

Xây dựng các thành phần React có khả năng truy cập (accessible) đòi hỏi nhiều hơn là chỉ thêm các nhãn ARIA. Bạn phải xử lý cách người dùng di chuyển qua giao diện bằng bàn phím.

Tôi đang ghi lại hành trình xây dựng một thành phần điều hướng có khả năng truy cập hoàn toàn từ con số không. Trong bản cập nhật này, tôi tập trung vào hai lĩnh vực chính: khắc phục các lỗi bẫy bàn phím (keyboard traps) và chuẩn bị cho việc quản lý danh sách con (sublist) mượt mà hơn.

𝗧𝗵𝗲 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱 𝗧𝗿𝗮𝗽 𝗙𝗶𝘅

Một vấn đề phổ biến xảy ra khi người dùng sử dụng Shift+Tab để đi vào một thành phần. Nếu tiêu điểm (focus) rơi vào một liên kết bên trong một danh sách con đang đóng, đường viền tiêu điểm (focus outline) sẽ biến mất. Đây là một lỗi nghiêm trọng đối với người dùng bàn phím.

Để khắc phục điều này, tôi đã thực hiện một thay đổi về logic:

• Nếu tiêu điểm chạm đến phần tử cuối cùng của một danh sách con đang đóng, hệ thống sẽ chuyển tiêu điểm đến nút cha ở hàng trên cùng. • Tôi sử dụng một trình lắng nghe sự kiện onFocus để phát hiện chuyển động cụ thể này. • Logic sẽ kiểm tra xem phần tử đang được tập trung có phải là phần tử cuối cùng trong thành phần hay không. • Nếu đúng, mã sẽ xác định tổ tiên ở hàng trên cùng và chuyển tiêu điểm đến đó.

Điều này đảm bảo người dùng không bao giờ bị mất dấu vị trí của họ trong giao diện.

𝗦𝗲𝘁𝘁𝗶𝗻𝗴 𝗨𝗽 𝗦𝘂𝗯𝗹𝗶𝘀𝘁 𝗖𝗹𝗼𝘀𝗶𝗻𝗴

Khi bạn đóng một menu cha, tất cả các menu con đang mở bên trong nó cũng nên được đóng lại. Đây là cách các hệ điều hành tiêu chuẩn hoạt động.

Để xử lý việc này trong React mà không gây ra các vấn đề về hiệu suất, tôi đã tránh lưu trữ các hàm trong state. Việc lưu trữ các hàm trong state sẽ kích hoạt các lần re-render không cần thiết.

Thay vào đó, tôi đã sử dụng một cách tiếp cận khác:

• Tôi đã tạo một Map bên trong một useRef. • Map này lưu trữ các hàm đóng liên kết với các phần tử cha. • Khi mảng điều hướng được yêu cầu, hệ thống sẽ tiêm (inject) các hàm này vào các đối tượng. • Sử dụng Ref cho phép tôi cập nhật các kết nối này mà không kích hoạt việc re-render.

Điều này tạo nền tảng cho hành vi menu sạch sẽ và có thể dự đoán được.

Tiếp theo, tôi sẽ triển khai logic thực tế để đóng các danh sách con đó.

Source: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l