[EuiComboBox] Ensure aria-describedby is applied on the input
#8798
Conversation
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
Collaborator
💚 Build Succeededcc @mgadewoll |
Collaborator
💚 Build Succeeded
cc @mgadewoll |
acstll
approved these changes
Jun 16, 2025
Contributor
acstll
left a comment
acstll
left a comment
There was a problem hiding this comment.
🟢 Verified manually the attribute is on the <input>, checked output with macOS VoiceOver. (thank you!)
mgadewoll
added a commit
that referenced
this pull request
Jun 16, 2025
- missed those before merging #8798
acstll
added a commit
to elastic/kibana
that referenced
this pull request
Jun 19, 2025
`103.0.0` ⏩ `103.1.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) ## Changes - **EuiDataGrid** now takes an `onFullScreenChange` callback - An accessibility fix in **EuiComboBox** - 3 bug fixes ## Package updates ### `@elastic/eui` ## [`v103.1.0`](https://github.com/elastic/eui/releases/v103.1.0) - Added `onFullScreenChange` prop to `EuiDataGrid` to handle changes when the component enters or exits fullscreen mode ([#8765](elastic/eui#8765)) **Bug fixes** - Fixed `onChange` being triggered twice when the checkbox in `EuiCheckableCard` is clicked ([#8786](elastic/eui#8786)) - Fixed a circular import on the legacy Amsterdam theme that would cause the theme usage to break ([#8780](elastic/eui#8780)) - Fixed high contrast theme token overrides not being applied ([#8742](elastic/eui#8742)) **Accessibility** - Fixed form errors not being read by screen readers for `EuiComboBox` inside of `EuiFormRow` ([#8798](elastic/eui#8798)) <!--ONMERGE {"backportTargets":["8.19","9.0"]} ONMERGE-->
acstll
added a commit
to acstll/kibana
that referenced
this pull request
Jun 19, 2025
`103.0.0` ⏩ `103.1.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) ## Changes - **EuiDataGrid** now takes an `onFullScreenChange` callback - An accessibility fix in **EuiComboBox** - 3 bug fixes ## Package updates ### `@elastic/eui` ## [`v103.1.0`](https://github.com/elastic/eui/releases/v103.1.0) - Added `onFullScreenChange` prop to `EuiDataGrid` to handle changes when the component enters or exits fullscreen mode ([elastic#8765](elastic/eui#8765)) **Bug fixes** - Fixed `onChange` being triggered twice when the checkbox in `EuiCheckableCard` is clicked ([elastic#8786](elastic/eui#8786)) - Fixed a circular import on the legacy Amsterdam theme that would cause the theme usage to break ([elastic#8780](elastic/eui#8780)) - Fixed high contrast theme token overrides not being applied ([elastic#8742](elastic/eui#8742)) **Accessibility** - Fixed form errors not being read by screen readers for `EuiComboBox` inside of `EuiFormRow` ([elastic#8798](elastic/eui#8798)) <!--ONMERGE {"backportTargets":["8.19","9.0"]} ONMERGE--> (cherry picked from commit b0d46f7) # Conflicts: # package.json # yarn.lock
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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
Caused by elastic/kibana#212381
This PR fixes an Accessibility bug, where the
aria-describedbypassed from a wrappingEuiFormRowwould not be applied on the input element of theEuiComboBoxbut instead on the outer wrapper. This would result in the errors not being read by screen readers when the input is focused.Why are we making this change?
This change fixes an WCAG Level A Accessibility issue with
EuiComboBox. The update ensures that related form error messages are read by screen readers when the combobox input is focused.WCAG 3.3.1 Error Identification
Screenshots
before
after
Impact to users
🟢 This is a bug fix only. There are no visual or breaking changes.
QA
aria-describedbyis applied on the combobox input and read by screen readersGeneral 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 examplesAdded or updated jest and cypress testsUpdated 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)