Navigation menu: keyboard navigation and button label for screen reader users

[cstrobbe]

Expected behaviour

1. In navigation menus, the expected keyboard behaviour to open a navigation menu is the Down arrow. (This currently does not work for any users.)
2. In navigation menus, the expected keyboard behaviour to navigate between the items on a menu bar is the Rigth and Left arrows. (This behaviour currently only works when no screen reader is running.)
3. The buttons (<button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button" data-ecl-menu-caret="" aria-label="Access item's children">) have a label that says what menu they open.

Actual behaviour

First, keyboard access for screen reader users is unusual:

• In Firefox with NVDA, it is impossible to open the menus: when the keyboard focus is on the button with the down arrow, the menu does not respond to the down arrow (the standard key command for an application menu, as opposed to a navigation menu), the Enter key or Space (the standard keys for buttons).
• In Edge with Narrator, it is also impossible to open the menus for the same reasons as above.

Second, the labelling:

• The buttons are announced as follows, "Access items children button", so the user does not know that the button is intended to open the menu to the left of the button, or needs to guess.

Steps to reproduce the issue

• Launch NVDA, then launch Firefox and use the keyboard to navigate the menu.
• Launch Narrator, then launch Edge and use the keyboard to navigate the menu.

[JaynouOliver]

Hey there I am eager to learn and can work on this issue as an open source contributor. I believe under your guidance I will be able to pull up a PR soon. Thank you

[Regine-Lambrecht]

Follow-up: the v4 of this component will be ok:

• keyboard access to sublevel with a screen reader ON
• arrow support
• accessible name of the expand button (also mentioning the name of the item on the left via aria-describedby

[JaynouOliver]

Hi, am I allowed to work on this?