Skip to content

[EuiListItemLayout] Add support for focusable disabled items via hasAriaDisabled#9584

Open
mgadewoll wants to merge 5 commits intoelastic:feat/selectable-ui-enhancementsfrom
mgadewoll:listitemlayout/support-focusable-disabled-items
Open

[EuiListItemLayout] Add support for focusable disabled items via hasAriaDisabled#9584
mgadewoll wants to merge 5 commits intoelastic:feat/selectable-ui-enhancementsfrom
mgadewoll:listitemlayout/support-focusable-disabled-items

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Apr 9, 2026

Summary

Important

This PR merges into a feature branch

This PR updates EuiListItemLayout by adding hasAriaDisabled prop 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 EuiListGroupItem which applies tooltips without restriction (besides via showTooltip) 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 hasAriaDisabled we'll extend the functionality to ensure keyboard navigation can also be supported.

Note

hasAriaDisabled is an opt-in feature.

Changes

  • Adds hasAriaDisabled prop on EuiListItemLayout
  • Removes the isDisabled condition for showing tooltips in EuiListItemLayout
  • Adds hasAriaDisabled prop on EuiListGroupItem
  • Adds manual disabled condition on EuiComboBox list item tooltips (to keep current behavior and align with EuiSelectableListItem; once we decide to make options focusable we can change this easily (see [EuiSelectable] Enable focusable disabled options #8869))

API Changes

component / parent prop / child change description
EuiListItemLayout (Internal component) hasAriaDisabled Added Default: false; Enables focusable disabled interactive list items
EuiListGroupItem hasAriaDisabled Added Default: false; Enables focusable disabled interactive list items

Screenshots

Before After
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.

  • 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
  • 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
  • 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
  • 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

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

  • verify that hasAriaDisabled=true on EuiListItemLayout results in interactive list items (element=button/a) being focusable when IsDisabled=true
  • verify that hasAriaDisabled=true on EuiListGroupItem results in interactive items (onClick or href) being focusable when IsDisabled=true
  • verify that disabled EuiListItemLayout and EuiListGroupItem items can show tooltips on hover and on focus (with hasAriaDisabled=true
  • verify that EuiSelectableListItem and EuiComboBox list items do not support tooltips on disabled items
  • verify there is no unexpected regression

Checklist before marking Ready for Review

Reviewer checklist

  • Approved Impact Assessment — Acceptable to merge given the consumer impact.
  • Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

@mgadewoll mgadewoll self-assigned this Apr 9, 2026
@mgadewoll mgadewoll mentioned this pull request Apr 9, 2026
25 tasks
@mgadewoll mgadewoll force-pushed the listitemlayout/support-focusable-disabled-items branch 2 times, most recently from c49ec06 to 9487aa4 Compare April 9, 2026 16:27
@mgadewoll mgadewoll changed the base branch from main to feat/selectable-ui-enhancements April 16, 2026 05:55
@mgadewoll mgadewoll force-pushed the listitemlayout/support-focusable-disabled-items branch from 9487aa4 to 436b72f Compare April 16, 2026 06:03
@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review April 16, 2026 07:41
@mgadewoll mgadewoll requested a review from a team as a code owner April 16, 2026 07:41
@acstll acstll self-requested a review April 16, 2026 09:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants