elastic / elastic/eui

[EuiComboBox] Rebuild with EuiSelectable

Open
#2,841 12 comments 0 reactions 0 assignees View on GitHub
accessibility stale-issue tech debt
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

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](https://github.com/elastic/kibana/issues/42988) and [#39357](https://github.com/elastic/kibana/issues/39357)

This issue fixes:

- [x] https://github.com/elastic/eui/issues/5951
- [x] https://github.com/elastic/kibana/issues/27749
- [x] https://github.com/elastic/kibana/issues/136527
- [x] https://github.com/elastic/eui/issues/7712

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.