p5.js-website icon indicating copy to clipboard operation
p5.js-website copied to clipboard

fix: prevent menu links from being focusable when menu is closed

Open hxrshxz opened this issue 2 months ago • 4 comments

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.

hxrshxz avatar Oct 06 '25 11:10 hxrshxz