[ML] (Accessibility) EuiCombobox with unified field stats

darnautov commented 1 year ago

Field stats flyout components in combination with EuiCombobox used by ML, Transform and AIOps plugins have several accessibility issues:

Nested button elements warning Relevant for the Transform wizard and Change point detection UI

Warning message

``` react_devtools_backend.js:2655 Warning: validateDOMNesting(...):

"Inspect field statistics" button can't be focused with a keyboard

We should either update the EuiCombobox component to support such use-case and satisfy accessibility requirements or come up with an alternative workflow.

elasticmachine commented 1 year ago

Pinging @elastic/kibana-accessibility (Project:Accessibility)

elasticmachine commented 1 year ago

Pinging @elastic/ml-ui (:ml)

cee-chen commented 1 year ago

We should either update the EuiCombobox component to support such use-case

This is not something that will happen on the EUI's end and we would strongly advise against trying to do this manually. This goes against W3's accessible combobox pattern/spec and the allowed keyboard interactions with them (primarily arrow key navigation and enter/escape - combobox options are explicitly excluded from tabbing sequence).

If you must have an interactive component within in a dropdown, you could consider the EuiContextMenu component or possibly just a custom EuiPopover.

If search/selection is desired UX however, you could stick with EuiComboBox while removing the clickable button and investigating an alternative workflow to investigate the selected item (e.g., adding the button after it has been selected / outside the combobox, instead of from within).

elastic / kibana

[ML] (Accessibility) EuiCombobox with unified field stats #155244