-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
Description
Blueprint's <Menu> component allows Tab/Shift+Tab to navigate between all menu items, but according to WAI-ARIA guidelines, menus are "composite widgets" where Tab should only focus the first item and arrow keys should be used for navigation between items.
Expected Behavior (per WAI-ARIA)
According to the WAI-ARIA Menubar Pattern:
When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item. Because menubar and menu elements are composite widgets as described in the practice for Keyboard Navigation Inside Components,
TabandShift+Tabdo not move focus among the items in the menu. Instead, the keyboard commands described in this section enable users to move focus among the elements in a menubar or menu.
Expected keyboard behavior:
- Tab/Shift+Tab: Should only focus the first menu item (treating the entire menu as a single tab stop)
- Arrow keys: Should navigate between menu items
- Right arrow: Opens submenus
- Left arrow: Closes submenus and returns to parent
Current Behavior
- Menu items have
tabIndex={0}, making each one a separate tab stop - Arrow keys do no work, pressing Up/Down/Left/Right does nothing for navigating the menu
- Only Tab/Shift+Tab can navigate between menu items
This creates accessibility issues since keyboard-only users must tab through every item (can't skip ahead).
Steps to Reproduce
- Create a menu with multiple items and submenus:
<Menu>
<MenuItem text="Item 1" />
<MenuItem text="Item 2" />
<MenuItem text="Item 3">
<MenuItem text="Submenu item" />
</MenuItem>
</Menu>- Focus the first menu item
- Try pressing Down arrow to move to the next item
- Expected: Focus moves to Item 2
- Actual: Nothing happens
- Try pressing Right arrow on Item 3
- Expected: Submenu opens and focus moves inside
- Actual: Nothing happens
- Tab through the menu
- Expected: Tab exits the menu after first item
- Actual: Tab moves through all items
Proposed Solution
To align with WAI-ARIA standards, add arrow key navigation:
- Up/Down arrows to navigate between items at the same level
- Right arrow to open submenus
- Left arrow to close submenus
- Home/End to jump to first/last item (optional but recommended)
References
- WAI-ARIA official example
- This came up while reviewing [Fix] Allow focus on items wrapped in disabled tooltips #7604