AVT 2 & 3 - React Header Base w/Navigation, Actions & SideNav 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

1. Open the React Header Base w/Navigation and ensure the links are displayed in the horizontal menu bar.
2. Tab to the first menu item, then arrow right to the next menu item and nothing happens.
   Expected result: right and left arrow keys should navigate right and left across menubar
3. Tab to Link 4 and use up and down arrows to navigate the submenu and nothing happens.
   Expected result: arrow keys should navigate up and down the sub-menu
4. Tab to the side menu and use up and down arrows to navigate the menu and nothing happens.
   Expected result: arrow keys should navigate up and down the menu
5. Hit Enter or Space on an expandable menu item and it expands and collapses as expected.
6. Make the browser window smaller so the menu displays as a hamburger icon. In addition to the issues mentioned above the following issues are also present:

• Press Esc does not close the menu
• After tabbing to open the menu tabbing again moves focus to the next focusable item in the banner.
  Expected result: Navigation should focus on the next menu item and Esc should close the menu.
  See ARIA Authoring Practices for menu and menubar for keyboard navigation.

[snidersd]

Also, see a new similar issue #3661.

[snidersd]

There is a new issue #3763 that is related.

[emyarod]

currently Tab, Space, Enter, and Esc are all functional for navigating through the header nav and side nav as well as submenu items with the keyboard. if arrow key navigation is a specific requirement we can revisit this issue

[snidersd]

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

[dakahn]

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

ref for background: w3c/aria-practices#353

[snidersd]

@dakahn IBMa discussion... 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