adobe / adobe/spectrum-web-components
[Bug]: `sp-menu` is not accessible when used as a persistent (application-style) menu
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] I agree to follow this project's code of conduct.
### Impacted component(s)
sp-menu
### Expected behavior
If the menu is persistent (not opened in a tray/popover and dismissed), it should not have screenreader instructions to dismiss it.
Menus can be used persistently. An `sp-menu` can be used with or without a popover. According to the [Spectrum design for Menu](https://spectrum.adobe.com/page/menu/)--emphasis mine, "Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray."
As far as whether they can do so accessibly, the menu AIRA role, according to the [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role), "A menu can be a permanently visible list of controls or a widget that can be made to open and close."
That said, persistent menus, might be best for the menubar pattern with vertical orientation. According to the [WAI ARIA menu tutorial](https://www.w3.org/WAI/tutorials/menus/application-menus/):
- `menubar`: Represents a (usually horizontal) menu bar.
- `menu`: Represents a set of links or commands in a menu bar, it is used for the fly-out menus.
Given that information, we should consider the one following:
#### Option 1: Add a New Menubar Component
_(Highest initial effort to develop)_
1. Extend the `Menu` class.
2. Override the `menu` role with `menubar`.
3. Add an `orientation` property that reflects to an `aria-orientation` attribute.
4. Create the necessary documentation, stories, and tests for it.
5. Update our documentation:
a. Create documentation for Menubar.
b. In Menu documentation, include accessibility instructions on how to use `` accessibly with a popover or tray.
c. In Menu documentation, note that menu should NOT be used for persistent menus, and instruct consumers to use`` for persistent menus.
Component example:
```
import type { Menu } from '@spectrum-web-components/menu';
export class Menubar extends Menu {
/**
* an application menu should have the role `menubar`
*/
protected override get ownRole(): string {
return 'menubar';
}
/**
* orientation of the menubar
*/
@property({ type: String, reflect: true, attribute: 'aria-orientation' })
public orientation?: 'horizontal' | 'vertical' = 'horizontal';
}
```
Usage example:
```
Deselect
Select inverse
Feather...
Select and mask...
Save selection
Make work path
```
#### Option 2: Add Menubar Features as Options within the Menu Component
_(Highest effort for developers to maintain)_
1. Add an option for the `menubar` role.
3. Add an optional `orientation` property that reflects to an `aria-orientation` attribute.
4. Create the necessary stories and tests for it.
5. Update our Menu documentation:
a. Add accessibility instructions on how to use `` accessibly with a popover or tray.
b. Add accessibility instructions on how to use `` accessibly as a persistent menubar _without_ a popover or tray.
Usage example:
```
Deselect
Select inverse
Feather...
Select and mask...
Save selection
Make work path
```
#### Option 3: Instruct Consumers to Use Sidenav for Persistent Menus
_(Least palatable option for consumers)_
Update our `sp-menu` documentation:
1. Include accessibility instructions on how to use `` accessibly with a popover or tray.
2. Note that menu should NOT be used for persistent menus, and instruct consumers to use`` for persistent menus.
### Actual behavior
VoiceOver adds the following instructions to any `sp-menu` with a `role="menu"` "To close this menu, press Escape", even if the menu cannot be dismissed.
Note: I consider this a Sev 2, "Issue with a component or controller with widespread use and blocks core user tasks (no known workaround)." While sighted users know they can tab out of the menu to the next focusable item, users who cannot see the screen would have to experiment with usingTab/Shift+Tab after the escape key did not work.
### Screenshots

### What browsers are you seeing the problem in?
_No response_
### How can we reproduce this issue?
1. Go to (https://opensource.adobe.com/spectrum-web-components/components/menu/#example)
2. Use VoiceOver to navigate to the example menu.
3. Note that VoiceOver says, "To close this menu, press Escape".
4. Press Escape.
5. Because the menu is persistent nothing happens, and focus remains on the menu.
### Sample code or abstract reproduction which illustrates the problem
_No response_
### Severity
SEV 2
### Logs taken while reproducing problem
_No response_
Contributor guide
Research direction
Start with the sp-menu component and reproduce the persistent-menu example using VoiceOver at the linked Menu documentation page. Determine which of the three proposed approaches is appropriate, then verify that persistent menus no longer announce an unusable Escape-to-close instruction and that the related documentation, stories, and tests are covered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100