Description

I'd like to consider refactoring our EUI Context Menu component to use the WAI-ARIA pattern for a navigation menu button. This pattern can be easily composed into a WAI-ARIA menubar.

The current implementation announces the context "flyout" menu as a modal dialog,

This is an improvement ticket based on my comment on PR 5719.

Background

From the linked comment:

After taking a longer look at our EuiContextMenu and the WAI guidelines for menus and menubars, I have some better guidance. True menus and menubars behave like OS menus, which is a subtle but important distinction:

A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. Menu widgets behave like native operating system menus, such as the menus that pull down from the menubars commonly found at the top of many desktop application windows.
3.15 Menu or Menu bar

This is where it's open to interpretation, but reading the spec a second and third time, it sounds like this pattern expects a menubar that has several links/buttons to expose menu elements. The EuiContextMenu doesn't appear to rise to this level, but does seem to be a good example of a WAI navigation menu button pattern. I think we could improve the handling of our component by doing a few things:

Success Criteria

• Assume the menu "trigger" is always a button and add aria-haspopup and aria-controls attributes
• Adjust the menu of elements to not announce as a dialog, and add proper menu and menuitem ARIA attributes
• Wrap each menuitem in a span or something and do not allow them to take keyboard focus. We would use roving tabindex like radio buttons do with arrow keys, per the spec.
• Pressing TAB closes the menu and sets focus on the next focusable element on the page

Guidance

• Understanding Success Criterion 4.1.2: Name, Role, Value