fix/The toggle navigation menu button is not keyboard accessible #7933
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances keyboard accessibility for the mobile navigation toggle by allowing it to receive focus and respond to Enter/Space keys.
- Added
tabIndex,aria-label, andonKeyDownhandlers to the toggle label. - Ensured the toggle input is activated via keyboard events.
Comments suppressed due to low confidence (1)
packages/ui-components/Containers/NavBar/index.tsx:59
- Add
aria-expanded={isMenuOpen}andaria-controls="sidebarItemToggler"to communicate the toggle state and the controlled element to assistive technologies.
aria-label={sidebarItemTogglerAriaLabel}
| @@ -55,7 +55,17 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({ | |||
| className={style.sidebarItemTogglerLabel} | |||
| htmlFor="sidebarItemToggler" | |||
| role="button" | |||
| tabIndex={0} | |||
There was a problem hiding this comment.
Consider using a native element instead of a with role="button" and tabIndex, so you get built-in keyboard support and proper semantics without custom handlers.
Copilot uses AI. Check for mistakes.
| aria-label={sidebarItemTogglerAriaLabel} | ||
| onKeyDown={e => { |
There was a problem hiding this comment.
Switch to onKeyUp for handling the Space key, as using onKeyDown can trigger the action before the default spacebar scroll prevention is handled by the browser.
| onKeyDown={e => { | |
| onKeyUp={e => { |
Copilot uses AI. Check for mistakes.
| const input = document.getElementById( | ||
| 'sidebarItemToggler' | ||
| ) as HTMLInputElement; | ||
| input?.click(); // Triggers input toggle |
There was a problem hiding this comment.
Rather than querying the DOM directly with getElementById, use a React ref on the input to avoid repeated lookups and improve maintainability.
| const input = document.getElementById( | |
| 'sidebarItemToggler' | |
| ) as HTMLInputElement; | |
| input?.click(); // Triggers input toggle | |
| sidebarItemTogglerRef.current?.click(); // Triggers input toggle |
Copilot uses AI. Check for mistakes.
| aria-label={sidebarItemTogglerAriaLabel} | ||
| onKeyDown={e => { |
There was a problem hiding this comment.
Why do we need an onKeyDown? It worked fine without one
There was a problem hiding this comment.
onKeyDown will open the navInteractionIcon by pressing enter or space when the navInteractionIcon is in focused state.
like displayed in the video provided above.
There was a problem hiding this comment.
if you want me to add or remove something then please let me know.
There was a problem hiding this comment.
We don't have an onClick handler, so I don't think we need an onKeyDown handler, is there a way to do this without?
There was a problem hiding this comment.
i don't think so as we have to mimic the click event by pressing tab and enter on the navInteractionIcon,
if you can suggest , please let me know i am ready to for that.
There was a problem hiding this comment.
In which circumstances will someone need to use the keyboard on a touch device such as a phone? Since this view is only rendered for small screens, supposedly touch? I feel we're trying to fix a non-existent issue.
I also don't think we should go the JavaScript route, this is 100% doable without JavaScript as @avivkeller mentioned. Check https://stackoverflow.com/questions/53753223/how-to-allow-for-users-to-keyboard-tab-over-and-select-invisible-checkboxes-with for example.
Dev 😃 issue |
Description
This PR improves accessibility by making the
mobile navigation toggle icon (navInteractionIcon) keyboard accessible.Previously, the icon could only be toggled via mouse click. With this update, users can now navigate to the toggle using the
Tab key and activate it using Enter or Space.Validation
Screen.Recording.2025-07-02.at.12.24.09.PM.mov
Related Issues
Fixes #7895
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.