Ui Shell has multiple A11y issues

[schuetza]

We are using carbon/vue now for a while, and in most cases we experienced that the components are accessible as claimed here: https://www.carbondesignsystem.com/guidelines/accessibility/overview.

Last year we moved from our own header implementation to the Carbon UI Shell component. However, this component has multiple accessibility issues as listed below.

To demonstrate the issues I provided a code sandbox here: https://yxwsf.csb.app/ (https://codesandbox.io/s/carbon-components-vue-forked-yxwsf)

Detailed description

1. Menus not navigable by keyboard

On the code sandox I have a header with a Hamburger Menu (cv-header-menu-button) and a right-hand menu (cv-header-menu). After loading the page I can tab to the Hamburger Menu and open it with both with Space or Enter. But after that, I can't navigate into it, not with tab, and not with arrow keys (as defined here: https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-12)

-> expected: after opening a menu with the keyboard, I can reach the menu items per keyboard, too. A possible quick fix here might be to change the order of the DOM Tree, as demonstrated in the sandbox:

• Open the Hamburger menu and select the "correct the DOM tree order" menu item
• Close the menu and open it with enter. Then press Tab key. Since the left-side slot is now a sibling of the button, the menu remains open and you can tab through the menu items (if they have tab stops)

2. Menus closed with Hamburger menu participate in the tab order

• Using the code sample above, set tab focus to the Hamburger by clicking on it.
• press tab -> Menu is closed and HeaderName field has focus (OK)
• press tab again: focus is invisible, but if looking at the bottom of the browser, you can see that the focus sits on a menu item of the Hamburger. This is confusing and wrong

-> expected: Tab order follows the flow in the screen, hidden elements must not have a tab stop

3. Menus closed with Hamburger menu are still visible to Screen Reader

When closing the menu, the menu is just shifted out of the screen, but a Screen reader doesn't have a concept of inside/outside visible screen. Therefore the screenreader reads all menu items, independent if the menu is open or closed.

-> expected : elements that should not be displayed must have style visibility:hidden or display:none to guide screen reader to ignore them

[schuetza]

see also https://ibm-cloud.slack.com/archives/C046Y0YUD/p1610472415247300

[github-actions[bot]]

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.