search

inovex / elements

Lovingly crafted ui components based on web components. Works well with all Frameworks - including Angular, React and Vue.
https://elements.inovex.de
MIT License
69 stars 9 forks source link

ino-menu: Accessibility #270

Open janivo opened 3 years ago

janivo commented 3 years ago

Describe the bug

The keyboard functionality of the ino-menu does not seem to work quite right, which makes it not accessible.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://elements.inovex.de/dist/latest/storybook/?path=/story/structure-ino-menu--default-usage
  2. Click on the Button OPEN MENU
  3. Try to navigate with your keyboard inside that menu
  4. See error

Expected behavior

The expected behavior is documented by MDC (https://github.com/material-components/material-components-web/tree/v8.0.0/packages/mdc-menu#accessibility):

With focus on the menu button:

  • Enter, Space & Down Arrow opens the menu and places focus on the first menu item.
  • Up Arrow opens the menu and moves focus to the last menu item.
  • The focus is set to list root element (where role="menu" is set) when clicked or touched. MDC List > handles the keyboard navigation once it receives the focus.

Your Environment

| Software | Version | | -------- | ------- | | @inovex.de/elements | 2.2.1 |
P1NHE4D commented 3 years ago

I noticed that the ino-list-item component is missing the menuitem role. Nevertheless, adding it did not fix the bug.