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

[ConcernedHobbit]

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/

[ConcernedHobbit]

Suggested labels: a11y, component: menu
Related issues: #21233 (Tabs) (loosely #32280 (Autocomplete))

[ConcernedHobbit]

aria-disabled also makes focus skip the element. This might be the more poignant issue.
Culprit:

material-ui/packages/mui-material/src/MenuList/MenuList.js

Line 72 in 7f26557

: nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';

This could be made into a separate issue or this could be scoped down. I'm not sure how actually disabled elements should be interpreted, but it seems like Button at least uses disabled to mean just aria-disabled.

[michaldudak]

We've got this working in the unstyled version of the Menu: MenuUnstyled. It will serve as a foundation for Material UI component in the future (we aim for the next major version - v6). I'll keep this issue open for reference.