𝗜𝘀𝘂 𝗙𝗼𝗸𝘂𝘀 𝗱𝗮𝗻 𝗦𝗼𝗸𝗼𝗻𝗴𝗮𝗻 𝗣𝗲𝗻𝗮𝗺𝗯𝗮𝗵𝗯𝗮𝗶𝗸𝗮𝗻

Membina komponen React yang boleh diakses memerlukan lebih daripada sekadar menambah label ARIA. Anda mesti mengendalikan cara pengguna bergerak melalui antara muka anda menggunakan papan kekunci.

Saya sedang mendokumentasikan perjalanan saya membina komponen navigasi yang sepenuhnya boleh diakses dari awal. Dalam kemas kini ini, saya memberi tumpuan kepada dua bidang utama: membaiki perangkap papan kekunci (keyboard traps) dan menyediakan pengurusan senarai sub (sublist) yang lebih lancar.

𝗣𝗲𝗺𝗯𝗮𝗶𝗸𝗮𝗻 𝗣𝗲𝗿𝗮𝗻𝗴𝗸𝗮𝗽 𝗣𝗮𝗽𝗮𝗻 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱

Isu biasa berlaku apabila pengguna menggunakan Shift+Tab untuk memasuki sesuatu komponen. Jika fokus mendarat pada pautan di dalam senarai sub yang tertutup, garis luar fokus (focus outline) akan hilang. Ini adalah ralat besar bagi pengguna papan kekunci.

Untuk membaiki perkara ini, saya telah melaksanakan perubahan logik:

• Jika fokus terkena elemen terakhir dalam senarai sub yang tertutup, sistem akan mengalihkan fokus ke butang induk pada baris teratas. • Saya menggunakan pendengar acara (event listener) onFocus untuk mengesan pergerakan khusus ini. • Logik tersebut menyemak sama ada elemen yang difokuskan adalah elemen terakhir dalam komponen tersebut. • Jika ya, kod tersebut mengenal pasti nenek moyang (ancestor) baris teratas dan mengalihkan fokus ke sana.

Ini memastikan pengguna tidak pernah kehilangan kedudukan mereka dalam antara muka.

𝗣𝗲𝗿𝘀𝗲𝗱𝗶𝗮𝗮𝗻 𝗣𝗲𝗻𝘂𝘁𝘂𝗽𝗮𝗻 𝗦𝗲𝗻𝗮𝗿𝗮𝗶 𝗦𝘂𝗯

Apabila anda menutup menu induk, semua submenu yang terbuka di dalamnya juga harus ditutup. Begitulah cara sistem operasi standard berfungsi.

Untuk mengendalikan perkara ini dalam React tanpa menyebabkan isu prestasi, saya mengelakkan penyimpanan fungsi dalam state. Menyimpan fungsi dalam state mencetuskan render semula (re-renders) yang tidak perlu.

Sebaliknya, saya menggunakan pendekatan yang berbeza:

• Saya mencipta sebuah Map di dalam useRef. • Map ini menyimpan fungsi penutupan yang dikaitkan dengan elemen induk. • Apabila tatasusunan (array) navigasi diminta, sistem akan menyuntik fungsi-fungsi ini ke dalam objek tersebut. • Menggunakan Ref membolehkan saya mengemas kini sambungan ini tanpa mencetuskan render semula.

Ini menyediakan asas untuk tingkah laku menu yang bersih dan boleh diramal.

Seterusnya, saya akan melaksanakan logik sebenar untuk menutup senarai sub tersebut.

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