mui / mui/material-ui

[Menu] ARIA APG: Disabled menu items should be focusable with keyboard navigation

Open
#33,603 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility scope: menu
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯
  1. Enter into a Menu with a disabled item
  2. Use keyboard to navigate Menu
  3. Observe that disabled items cannot be focused
Expected behavior 🤔
  1. Enter into a Menu with a disabled item
  2. Use keyboard to navigate Menu
  3. Disabled items can be focused
  4. Disabled items cannot be activated
Steps to reproduce 🕹

Steps:
https://codesandbox.io/s/mui-disabled-menu-item-keyboard-navigation-8k3rwl

  1. Move focus into Menu
  2. Use keyboard to navigate
  3. Observe behaviour
Context 🔦

According to APG menu/menubar pattern[1], disabled menu items should be focusable but cannot be activated (see "NOTE" in [1]).

The APG menu button pattern[2] does not override these requirements, and instead specifies that the specifications of Menu/Menubar should be followed after a menu is opened.

[1] https://www.w3.org/WAI/ARIA/apg/patterns/menu/
[2] https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the behavior in the linked CodeSandbox and trace the Menu keyboard-navigation implementation. Check the existing Menu behavior and tests, then ensure disabled items receive keyboard focus without activation; done means navigation reaches them while activation remains blocked.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.