An accessibility audit on the ML UI has raised several issues related to the EuiSuperSelect control:

• The rendered <button> element is given role="option" (see [ML] (Accessibility) Anomaly Detection/Anomaly Explorer - ARIA issue and potential JS bug kibana#52378). The "option" role is intended to identify a selectable item in a select list. Authors must ensure elements with role option are contained in, or owned by, an element with the role listbox. It has been suggested that for the button element, you are restricted to the following roles: checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, or switch, although I wonder if the listbox role is more suitable here?

<button role="option" type="button" class="euiSuperSelectControl" 
aria-haspopup="true" 
aria-labelledby="undefined y1q6hj0r" 
aria-selected="true">

...More Code...

</button>

• The button is rendered with an undefined value for aria-labelledby. This looks like it is because src/components/form/super_select/super_select_control.js is using the id property which is undefined.

• Focus order is lost when exiting the options. After tabbing into the options in the control, and then pressing ESC to close the control or ENTER to select a value, the next TAB should navigate to the next control on the page, but focus returns to the first element on the page (can be reproduced on the EUI Examples page, or see [ML] (Accessibility) Machine Learning - Focus Order and focus visible kibana#50181).