AVT 2 & 3 - React Header Base w/SideNav, Fixed SideNav, & SideNav w/Icon UI Shell has keyboard navigation issues

[snidersd]

Environment

macOS Mojave version 10.14.5
Chrome Version 75.0.3770.100 (Official Build) (64-bit)
Carbon v10 - React
DAP - July 2019 Ruleset

Detailed Description

Tab to the side menu and use up and down arrows to navigate the menu and nothing happens.
Esc does not close the menu.
Expected result: Up and down arrow keys should navigate up and down the menu. Esc key should close the menu.

See ARIA Authoring Practices for menu and menubar for keyboard navigation.

[dakahn]

This is specifically pertaining to non-fixed sidenav 👍

[emyarod]

it looks like Tab, Space, and Enter are functional for navigation and toggling menu state, unless arrow key is a strict requirement. will add Esc key support

[snidersd]

@emyarod @dakahn According to the ARIA Authoring Practices for menu and submenu arrow keys navigation is expected. If the component does not follow this pattern it should be reopened.

[tw15egan]

Since we seem to have a few similar issues with arrow navigation inside UI shell, it might be best if we consolidate these issues and discuss our strategy in that regard.

via #5198 (comment)

Yeah that menu pattern is controversial and introduces complications (menu being a system level designation vs the list of links or dropdowns found on the web).

Here's a cool primer
https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html

cc @dakahn

[dakahn]

Added blocked label pending word from IBMa Standards on which pattern to use here

ref for background: w3c/aria-practices#353

[snidersd]

@dakahn After discussions with IBMa... Currently the Carbon UI Shell has navigation menus with the ARIA role="menu", which relays to users of assistive technology that they can expect application menu keyboard interactions (i.e., arrow keys to move between items; Esc to collapse the menu). In this case the component should have the keyboard navigation as defined in the ARIA Authoring Practices. However, if the navigation menus are not meant to be application menus, ARIA role="menu" should be removed.
Also, see Example Disclosure for Navigation menus.

[dakahn]

If we erroneously have role="menu" implying an application menu, let's remove it and continue with the navigation menu pattern we've been using 🏄 Unblocking, thanks @snidersd