𝗙𝗼𝗰𝘂𝘀 𝗜𝘀𝘀𝘂𝗲𝘀 𝗮𝗻𝗱 𝗥𝗲𝗳𝗶𝗻𝗲𝗺𝗲𝗻𝘁 𝗦𝘂𝗽𝗽𝗼𝗿𝘁
Building accessible React components requires more than just adding ARIA labels. You must handle how users move through your interface with a keyboard.
I am documenting my journey of building a fully accessible navigation component from scratch. In this update, I focus on two main areas: fixing keyboard traps and preparing for smoother sublist management.
𝗧𝗵𝗲 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱 𝗧𝗿𝗮𝗽 𝗙𝗶𝘅
A common issue occurs when a user uses Shift+Tab to enter a component. If the focus lands on a link inside a closed sublist, the focus outline disappears. This is a major error for keyboard users.
To fix this, I implemented a logic change:
• If focus hits the last element of a closed sublist, the system shifts focus to the parent button on the top row. • I use an onFocus event listener to detect this specific movement. • The logic checks if the focused element is the last one in the component. • If it is, the code identifies the top-row ancestor and moves the focus there.
This ensures the user never loses their place in the interface.
𝗦𝗲𝘁𝘁𝗶𝗻𝗴 𝗨𝗽 𝗦𝘂𝗯𝗹𝗶𝘀𝘁 𝗖𝗹𝗼𝘀𝗶𝗻𝗴
When you close a parent menu, all open submenus inside it should also close. This is how standard operating systems work.
To handle this in React without causing performance issues, I avoided storing functions in state. Storing functions in state triggers unnecessary re-renders.
Instead, I used a different approach:
• I created a Map inside a useRef. • This Map stores the close functions associated with parent elements. • When the navigation array is requested, the system injects these functions into the objects. • Using a Ref allows me to update these connections without triggering a re-render.
This sets the foundation for clean, predictable menu behavior.
Next, I will implement the actual logic to close those sublists.
Source: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l