eui

eui copied to clipboard

The existing EuiComboBox has a few a11y shortcomings and differs in implementation from EuiSelectable which has been crowned as the future implementation of dropdown-like things. To consolidate implementations of similar components, fix the a11y problems, and unify the UX, EuiComboBox should be rewritten using EuiSelectable.

On top of EuiSelectable, EuiComboBox largely provides:

1. A clear button (which needs improved contrast from what's there today)
   Picture example

   (should be 4.5:1)
2. Buttons with the selected items inside the search field
3. A dropdown view of the results instead of inline
   Which currently has a minor a11y issue associated with it (#5024)

   Popup indicator should be excluded from focus order (Under "Keyboard Interaction" for Combobox)

I think the EUI team prefers to keep the EuiComoboBox component and to wrap EuiSelectable within it but another implementation option is to add a "renderAs" prop (or something along those lines) to EuiSelectable to adjust styling.

This replaces Kibana issues #42988 and #39357

As part of this work, also mark EuiFilterSelectItem for deprecation (See #5387)

To add more requested context, EuiSelectable has the best built-in accessibility by far (semantic HTML, keyboard navigation, screen reader announcements) and we should dogfood that a11y instead of rewriting it for the 4+ selection components we use. In this case, EuiComboBox has several reported a11y and perf issues (in the github mentions history - see above) that would likely be resolved by this refactor.

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

Just a quick update. We're putting a 3 month window on completing this issue. I believe it should also solve the following issues:

https://github.com/elastic/eui/issues/7289 https://github.com/elastic/eui/issues/5951 https://github.com/elastic/kibana/issues/27749 https://github.com/elastic/kibana/issues/136527 https://github.com/elastic/eui/issues/7712

EDIT: I think we'll be targeting 8.16 for this one.