[Bug]: `sp-menu` is not accessible when used as a persistent (application-style) menu

[nikkimk]

Code of conduct

• 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--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, "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:

• 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 <sp-menu> 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<sp-menubar> 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:

<sp-menubar orientation="vertical">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menubar>

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.
2. Add an optional orientation property that reflects to an aria-orientation attribute.
3. Create the necessary stories and tests for it.
4. Update our Menu documentation:
   a. Add accessibility instructions on how to use <sp-menu> accessibly with a popover or tray.
   b. Add accessibility instructions on how to use <sp-menu> accessibly as a persistent menubar without a popover or tray.

Usage example:

<sp-menu is-menubar orientation="vertical">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>

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 <sp-menu> accessibly with a popover or tray.
2. Note that menu should NOT be used for persistent menus, and instruct consumers to use<sp-sidenav> 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