[EuiListItemLayout] Add support for focusable disabled items via hasAriaDisabled#9584
Open
mgadewoll wants to merge 5 commits intoelastic:feat/selectable-ui-enhancementsfrom
Conversation
25 tasks
c49ec06 to
9487aa4
Compare
17 tasks
9487aa4 to
436b72f
Compare
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
Collaborator
💚 Build Succeeded
History
cc @mgadewoll |
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
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
Important
This PR merges into a feature branch
This PR updates
EuiListItemLayoutby addinghasAriaDisabledprop to enable support for focusable disabled items. This uses the same functionality implemented in button components (Beta feature).The main intention here is to support adding tooltips in different scenarios, enabled items as well as disabled ones. Besides that, we'd want to (at least for now) keep parity for
EuiListGroupItemwhich applies tooltips without restriction (besides viashowTooltip) as it can be used as visual alternative when items are truncated (EUI docs).This behavior to show tooltips previously only worked for mouse interactions. By supporting focusable disabled elements via
hasAriaDisabledwe'll extend the functionality to ensure keyboard navigation can also be supported.Note
hasAriaDisabledis an opt-in feature.Changes
hasAriaDisabledprop onEuiListItemLayoutisDisabledcondition for showing tooltips inEuiListItemLayouthasAriaDisabledprop onEuiListGroupItemEuiComboBoxlist item tooltips (to keep current behavior and align withEuiSelectableListItem; once we decide to make options focusable we can change this easily (see [EuiSelectable] Enable focusable disabled options #8869))API Changes
EuiListItemLayout(Internal component)hasAriaDisabledfalse; Enables focusable disabled interactive list itemsEuiListGroupItemhasAriaDisabledfalse; Enables focusable disabled interactive list itemsScreenshots
Screen.Recording.2026-04-09.at.16.53.41.mov
Screen.Recording.2026-04-09.at.17.05.55.mov
Impact Assessment
Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.
Impact level: 🟢 None - opt-in feature
ℹ️ The changes were tested in Kibana CI in combination with the changes from #9579. (🟢 CI build)
Release Readiness
Documentation: {link to docs page(s)}Figma: {link to Figma or issue}Migration guide: {steps or link, for breaking/visual changes or deprecations}Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}QA instructions for reviewer
💻 EuiListItemLayout storybook
hasAriaDisabled=trueonEuiListItemLayoutresults in interactive list items (element=button/a) being focusable whenIsDisabled=truehasAriaDisabled=trueonEuiListGroupItemresults in interactive items (onClickorhref) being focusable whenIsDisabled=trueEuiListItemLayoutandEuiListGroupItemitems can show tooltips on hover and on focus (withhasAriaDisabled=trueEuiSelectableListItemandEuiComboBoxlist items do not support tooltips on disabled itemsChecklist before marking Ready for Review
CodeSandbox andKibanaQA: Tested docs changesBreaking changes: Addedbreaking changelabel (if applicable)Reviewer checklist