Accessibility markup problems in Carbon react overflow menu

In the Carbon react overflow menu:

1. the div containing the overflow icon needs to have role="button", not role="menu"
2. the button needs a nice default label in case one is not provided, say aria-label="Menu"
3. the ul with role="menu" needs to have the same aria-label as the button
4. there’s a div with role="menuitem" in the DOM for no apparent reason (see screen snap, below. This may be the cause of https://github.com/IBM/carbon-components-react/issues/1237)
5. the div with role="button" (see 1) and the ul with role="menu" need to be siblings, i.e. the ul should immediately follow the button in the DOM, so that screen reader users can use their virtual cursor to read through the menu items without getting totally lost.

[carmacleod]

Apologies for my suggestion to use “Menu” as a default aria-label when a label is not provided. Windows screen readers say “[label] menu button” (NVDA) or “[label] button menu” (JAWS) when focus goes to a button with aria-haspopup="true", and so it turns out that “Menu” is redundant (i.e. NVDA says “Menu menu button” and JAWS says “Menu button menu”). A better default string might be “Overflow” or “More…”.

Regarding the label for the dropdown ul, it should really use aria-labelledby if possible, which can be set to the id for the button, so that the menu always picks up the same label as the button. That would also work if the button had visible text instead of an icon. See the APG menu button example for an example of using aria-labelledby on the dropdown menu element.

Regarding the problem of having the menu show when the button is in a table and sibling markup is used, this example seems to have solved that problem.

[asudoh]

BTW from https://www.w3.org/TR/wai-aria-1.1/#aria-owns:

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.