[EuiComboBox][A11y] Prevent custom option ids from breaking accessibility#8829
Merged
mgadewoll merged 6 commits intoelastic:mainfrom Jul 1, 2025
Merged
Conversation
- this ensures that consumers can pass custom ids on options without breaking the internal accessibility handling of combobox
- ensures both usages of ids result in expected accessible markup
edf15b4 to
623d5a0
Compare
acstll
approved these changes
Jun 30, 2025
Contributor
acstll
left a comment
There was a problem hiding this comment.
🟢 I tested the changes locally with NVDA on Windows 11 (woohoo), it works as expected (also tested the current implementation, when passing ids in the options list it'll yield "blank").
I'm approving but also leaving a couple of comments regarding names that you may consider.
packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
Outdated
Show resolved
Hide resolved
- updates setListOptions to setListOptionRefs
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
Collaborator
💚 Build Succeeded
History
cc @mgadewoll |
This was referenced Jul 3, 2025
acstll
added a commit
to elastic/kibana
that referenced
this pull request
Jul 14, 2025
`104.1.0` ⏩ `105.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([#8834](elastic/eui#8834)) - Added component tokens: ([#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
Bluefinger
pushed a commit
to Bluefinger/kibana
that referenced
this pull request
Jul 22, 2025
`104.1.0` ⏩ `105.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([elastic#8834](elastic/eui#8834)) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([elastic#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([elastic#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([elastic#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([elastic#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([elastic#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([elastic#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
`104.1.0` ⏩ `105.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([elastic#8834](elastic/eui#8834)) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([elastic#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([elastic#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([elastic#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([elastic#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([elastic#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([elastic#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
closes #8826
This PR adds support for handling custom option ids. Since the component uses generic types for the options, it's possible for consumers to pass
id(e.g. for additional sorting on implementation side).To ensure that the accessible linking between options and input works as expected via
aria-activedescendantthis PR updates EuiComboBox by using theidvalue from the actual available option DOM elements instead of passing a static id based on theactiveOptionIndex.This ensures that the following two scenarios work and ensure that the component results in an accessible output when navigating the options list:
optionsshapeWhy are we making this change?
This update ensures that the accessibility of EuiComboBox is more robust towards consumer input and can't be broken as easily.
Screenshots
before
after
Screen.Recording.2025-06-27.at.20.40.28.mov
Screen.Recording.2025-06-27.at.20.41.04.mov
Impact to users
🟢 This update does not require any updates on consumer side.
QA
EuiComboBox > PlaygroundandEuiComboBox > With Custom IdsEuiComboBox > Playground, verify using a screen reader that the options are correctly announced on keyboard navigation in the options listEuiComboBox > With Custom Ids, verify using a screen reader that the options are correctly announced on keyboard navigation in the options listGeneral checklist
Checked in both light and dark modesChecked in both MacOS and Windows high contrast modesChecked in mobileAdded documentationProps have proper autodocs (using@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesUpdated visual regression testsIf applicable, added the breaking change issue label (and filled out the breaking change checklist)If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)