p5.js-website
p5.js-website copied to clipboard
fix: prevent menu links from being focusable when menu is closed
Description
When keyboard users navigated to the menu button and pressed Tab to move focus away, the menu list would automatically expand but was not fully visible on mobile viewports. This occurred because the menu links were still in the tab order even when the menu was closed, causing focus to move inside the hidden menu panel.
Fixes #915
Solution
Added dynamic tabIndex to navigation links:
- When menu is open:
tabIndex={0}(links are focusable) - When menu is closed:
tabIndex={-1}(links are removed from tab order)
Menu list no longer automatically expands when keyboard users tab away from the menu button.
This makke sures that tabbing away from the menu button moves focus to the next element outside the menu, not to hidden links inside it.