Menu: support up/down arrow keys on menu triggers

[ramji-seetharaman]

Reproduction

https://stackblitz.com/angular/kdxrpaxealr?file=src%2Fapp%2Fmenu-overview-example.ts

Steps to reproduce:

1. Navigate to the StackBlitz link provided above
2. Tab to the Menu component
3. Verify whether keyboard interactions for Menu works as per ARIA specifications.

Expected Behavior

Keyboard interactions for Menu needs to work as per ARIA specifications. Here is the keyboard support for Accessible Menus as per the ARIA specifications.

The menus are keyboard accessible:

Activate the triggering element using the keyboard.
Press the UP and DOWN Arrow keys to move focus between the menu options.
Press the LEFT and RIGHT Arrow keys to open or close submenus.
Press ENTER to activate a menu option.
Press ESCAPE to close the currently open menu.
Press TAB or set focus back on the triggering element to close the menu and all submenus.
Mouse users can click the desired menu option as usual.

Out of this, there are a couple of keyboard behaviors that doesn't work as expected. When the focus moves to the button that triggers the menu, even though the enter key activates and opens the menu, activating the Up/Down arrow keys must open the menu and move focus to the last and the first menuitem respectively. Also when the user activates the "Tab" keystroke from inside the menu, focus needs to return back to the triggering element that opened the menu.

Actual Behavior

Currently activating the "Tab" keystroke moves focus to the next interactive element in the page. Focus needs to move back to the menu button that triggered it.

When focus moves to the menu and the user uses Up/Down arrow keys, there is no action that is triggered to open the menu.

Reference Links:

1. http://whatsock.com/tsg/
2. https://www.w3.org/WAI/tutorials/menus/application-menus/

Environment

• Angular: 10.2.7
• CDK/Material: 10.2.7
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all

[ramji-seetharaman]

@jelbourn - Hi Jeremy. Do you need anything in specific that needs to be discussed?

[jelbourn]

The W3C authoring practices list the up/down arrow key behavior on the trigger as optional. Since this is optional, I don't necessarily see us adding this behavior.

The authoring practices for menu state that tab/shift+tab should move the focus to the next/previous element, respectively, so I believe the current behavior is working as expected.

[ramjiseetharaman]

@jelbourn - Thank you so much Jeremy for providing references to W3C Authoring practices. I do agree with you that the Down/Up Arrow navigation is marked optional is the Authoring practices. But I did look into multiple examples with Menus and a standard menu usually supports the Up/Down arrow since menus in general are seen similar to application menus(Docs, Sheets etc) and the interactions that are expected are the same.

The first 5 examples from an ARIA menu google search yielded me results where they primarily support Up/Down interactions rather than activating it user enter. The keyboard support documents the Up/Down arrow. I agree it is optional, but at least can be a good additional behavior.

https://w3c.github.io/aria-practices/examples/menu-button/menu-button-actions.html
https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
http://whatsock.com/tsg/
https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/

But, I agree with you that it is optional and also to the fact that Tab/Shift + Tab moves focus to the next/previous interactive element. This behavior is working as expected. Sorry for the misinformation.

[ramjiseetharaman]

@jelbourn - Will this be worked as a feature request anytime soon Jeremy? We are using this component in our application and dependent on the issue to get fixed! Kindly requesting you to provide an update

[jelbourn]

Since the issue is optional, it's a low priority for us and we probably won't work on it any time soon.

[ramji-seetharaman]

@jelbourn - Just circling back with you to check whether this feature will be added in the near future?

[jelbourn]

We don't have plans to work on this, but it should be pretty straightforward to add custom key handling to support this at the application level.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.