Skip to content

[Menu] Keyboard navigation doesn't follow WAI-ARIA composite widget pattern #7626

@ggdouglas

Description

@ggdouglas

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, Tab and Shift + Tab do 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

  1. 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>
  1. Focus the first menu item
  2. Try pressing Down arrow to move to the next item
    • Expected: Focus moves to Item 2
    • Actual: Nothing happens
  3. Try pressing Right arrow on Item 3
    • Expected: Submenu opens and focus moves inside
    • Actual: Nothing happens
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions