Skip to content

[EuiToolTip][A11y] Ensure tooltip anchor wrapper is unique for screen reader DOM navigation #9208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mgadewoll merged 3 commits into from
Nov 24, 2025
Merged

[EuiToolTip][A11y] Ensure tooltip anchor wrapper is unique for screen reader DOM navigation #9208

mgadewoll merged 3 commits into from
Nov 24, 2025

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Nov 11, 2025 •
edited
Loading

Summary

This PR adds a unique id to the tooltip anchor element to ensure it's a unique DOM element.
When testing disabled buttons in #9201 it showed that NVDA treats DOM elements that have the same "markup" as a single DOM stop when navigating in "browse" mode (using the screen reader navigation via ArrowDown/Up instead of Tab).
This would result in a confusing experience where e.g. for a disabled button group, all equal state button would be read on a single navigational stop.

This is not exclusive to disabled elements in particular, but would happen for any element that's navigated with the screen reader navigation that has an (kind of) identical sibling as the next element.

It turns out that we can work around this by ensuring the elements have a unique attribute. Interestingly enough, data- attributes don't seem to work.

Why are we making this change?

:accessibility: Accessibility: Improvement to the navigation of tooltips, specifically as preparation for the upcoming changes to enable tooltips on disabled buttons in #9201.

Screenshots #

before after
Screen.Recording.2025-11-11.at.21.30.22.mov
Screen.Recording.2025-11-11.at.21.30.45.mov

Impact to users

🟢 There are no code updates required by users.

ℹ️ Due to the added DOM attribute, there are likely snapshot test updates required.
The snapshots for Kibana have been updated here.

QA

  • checkout this branch and compare the navigation in NVDA for the added testing story and verify elements can be navigated as standalone elements

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
    • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
  • Designer 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)

@mgadewoll
refactor: add id on tooltip anchor element
be9d065 
- this ensures the anchor wrapper is a unique element in the DOM for NVDA to navigate
@mgadewoll mgadewoll self-assigned this Nov 11, 2025
@mgadewoll mgadewoll force-pushed the tooltip/a11y-improve-anchor-sr-dom-navigation branch from eccc6c5 to b1888d8 Compare November 11, 2025 22:23
@mgadewoll mgadewoll marked this pull request as ready for review November 12, 2025 09:45
@mgadewoll mgadewoll requested a review from a team as a code owner November 12, 2025 09:45
weronikaolejniczak
weronikaolejniczak reviewed Nov 14, 2025
View reviewed changes
weronikaolejniczak
weronikaolejniczak approved these changes Nov 14, 2025
View reviewed changes
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🟢 It might be a small thing but it's definitely an improvement. Thanks for the attention to details, Lene!

NVDA + Chrome

Tested this story.

Before After
Reads both buttons at once
Kapture.2025-11-14.at.10.43.20.mp4
Reads buttons individually
Kapture.2025-11-14.at.10.44.48.mp4

@mgadewoll mgadewoll force-pushed the tooltip/a11y-improve-anchor-sr-dom-navigation branch from b1888d8 to 0061310 Compare November 14, 2025 13:06
@elasticmachine
Copy link
Collaborator

elasticmachine commented Nov 14, 2025

💚 Build Succeeded

History

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

elasticmachine commented Nov 14, 2025

💚 Build Succeeded

History

cc @mgadewoll

@mgadewoll mgadewoll merged commit 25ab93f into elastic:main Nov 24, 2025
7 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Nov 24, 2025
Merged
mgadewoll added a commit to elastic/kibana that referenced this pull request Dec 2, 2025
@weronikaolejniczak @jsanz @mgadewoll
Update EUI to 109.2.0 (#244032)
79be3fb 
- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0`
- `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.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

- Only snapshot updates related to EuiPopover, ToolTip and Table changes
(see below)

## Package updates

### `@elastic/eui` v109.2.0

- Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values
for `grow` are passed
([#9228](elastic/eui#9228))
- Updated shared button styles in `useEuiButtonColorCSS` to use
`euiDisabledSelector`
([#9226](elastic/eui#9226))
- Added `euiTextTruncateCSS` Emotion style utility
([#9231](elastic/eui#9231))
- Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and
`EuiInMemoryTable` ([#9224](elastic/eui#9224))
- Added component token `components.tableFooterBackground`
([#9224](elastic/eui#9224))
- Updated the color of mobile table header cells to use
`colors.textSubdued` ([#9224](elastic/eui#9224))
- Updated `EuiSuperDatePicker` to show a tooltip with the full range
details when the button displays a pretty duration e.g. "Last 15
minutes" ([#9221](elastic/eui#9221))
- Updated `EuiPopover` default prop values of `hasArrow`, `position` and
`offset`: ([#9218](elastic/eui#9218))
  - Changed `hasArrow` to `false`
  - Changed `position` to `downLeft`
  - Changed `offset` to `4` when `hasArrow=false`
- Updated `EuiInputPopover` `offset` default value to `2`
([#9218](elastic/eui#9218))
- Updated `EuiTourStep` to not apply `hasArrow=true` by default when
`decoration="none"` ([#9218](elastic/eui#9218))
- Updated `EuiSuperDatePicker` to have a more forgiving manual input for
absolute dates. ([#9199](elastic/eui#9199))

**Bug fixes**

- Updated EuiButtonGroup disabled style selectors to use
`euiDisabledSelector` to ensure high contrast mode styles apply
correctly ([#9226](elastic/eui#9226))
- Updated `EuiSuperDatePicker` to ensure its pretty format button dates
are truncated correctly
([#9231](elastic/eui#9231))
- Fixed a visual bug for mobile table action buttons that causes
shifting positions when changing color mode
([#8231](elastic/eui#8231))
([#9224](elastic/eui#9224))

**Accessibility**

- Improved the navigation of sibling `EuiToolTip` anchor elements in
NVDA browse mode by adding an `id` to ensure they are unique
([#9208](elastic/eui#9208))

### `@elastic/eui-theme-borealis` v5.1.0

- Added component token `components.tableFooterBackground`
([#9224](elastic/eui#9224))

---------

Co-authored-by: Jorge Sanz <[email protected]>
Co-authored-by: Lene Gadewoll <[email protected]>
NicholasPeretti pushed a commit to NicholasPeretti/kibana that referenced this pull request Dec 2, 2025
@weronikaolejniczak @jsanz
@mgadewoll @NicholasPeretti
Update EUI to 109.2.0 (elastic#244032)
5769113 
- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0`
- `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.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

- Only snapshot updates related to EuiPopover, ToolTip and Table changes
(see below)

## Package updates

### `@elastic/eui` v109.2.0

- Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values
for `grow` are passed
([elastic#9228](elastic/eui#9228))
- Updated shared button styles in `useEuiButtonColorCSS` to use
`euiDisabledSelector`
([elastic#9226](elastic/eui#9226))
- Added `euiTextTruncateCSS` Emotion style utility
([elastic#9231](elastic/eui#9231))
- Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and
`EuiInMemoryTable` ([elastic#9224](elastic/eui#9224))
- Added component token `components.tableFooterBackground`
([elastic#9224](elastic/eui#9224))
- Updated the color of mobile table header cells to use
`colors.textSubdued` ([elastic#9224](elastic/eui#9224))
- Updated `EuiSuperDatePicker` to show a tooltip with the full range
details when the button displays a pretty duration e.g. "Last 15
minutes" ([elastic#9221](elastic/eui#9221))
- Updated `EuiPopover` default prop values of `hasArrow`, `position` and
`offset`: ([elastic#9218](elastic/eui#9218))
  - Changed `hasArrow` to `false`
  - Changed `position` to `downLeft`
  - Changed `offset` to `4` when `hasArrow=false`
- Updated `EuiInputPopover` `offset` default value to `2`
([elastic#9218](elastic/eui#9218))
- Updated `EuiTourStep` to not apply `hasArrow=true` by default when
`decoration="none"` ([elastic#9218](elastic/eui#9218))
- Updated `EuiSuperDatePicker` to have a more forgiving manual input for
absolute dates. ([elastic#9199](elastic/eui#9199))

**Bug fixes**

- Updated EuiButtonGroup disabled style selectors to use
`euiDisabledSelector` to ensure high contrast mode styles apply
correctly ([elastic#9226](elastic/eui#9226))
- Updated `EuiSuperDatePicker` to ensure its pretty format button dates
are truncated correctly
([elastic#9231](elastic/eui#9231))
- Fixed a visual bug for mobile table action buttons that causes
shifting positions when changing color mode
([elastic#8231](elastic/eui#8231))
([elastic#9224](elastic/eui#9224))

**Accessibility**

- Improved the navigation of sibling `EuiToolTip` anchor elements in
NVDA browse mode by adding an `id` to ensure they are unique
([elastic#9208](elastic/eui#9208))

### `@elastic/eui-theme-borealis` v5.1.0

- Added component token `components.tableFooterBackground`
([elastic#9224](elastic/eui#9224))

---------

Co-authored-by: Jorge Sanz <[email protected]>
Co-authored-by: Lene Gadewoll <[email protected]>
JordanSh pushed a commit to JordanSh/kibana that referenced this pull request Dec 9, 2025
@weronikaolejniczak @jsanz
@mgadewoll @JordanSh
Update EUI to 109.2.0 (elastic#244032)
82a613c 
- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0`
- `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.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

- Only snapshot updates related to EuiPopover, ToolTip and Table changes
(see below)

## Package updates

### `@elastic/eui` v109.2.0

- Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values
for `grow` are passed
([elastic#9228](elastic/eui#9228))
- Updated shared button styles in `useEuiButtonColorCSS` to use
`euiDisabledSelector`
([elastic#9226](elastic/eui#9226))
- Added `euiTextTruncateCSS` Emotion style utility
([elastic#9231](elastic/eui#9231))
- Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and
`EuiInMemoryTable` ([elastic#9224](elastic/eui#9224))
- Added component token `components.tableFooterBackground`
([elastic#9224](elastic/eui#9224))
- Updated the color of mobile table header cells to use
`colors.textSubdued` ([elastic#9224](elastic/eui#9224))
- Updated `EuiSuperDatePicker` to show a tooltip with the full range
details when the button displays a pretty duration e.g. "Last 15
minutes" ([elastic#9221](elastic/eui#9221))
- Updated `EuiPopover` default prop values of `hasArrow`, `position` and
`offset`: ([elastic#9218](elastic/eui#9218))
  - Changed `hasArrow` to `false`
  - Changed `position` to `downLeft`
  - Changed `offset` to `4` when `hasArrow=false`
- Updated `EuiInputPopover` `offset` default value to `2`
([elastic#9218](elastic/eui#9218))
- Updated `EuiTourStep` to not apply `hasArrow=true` by default when
`decoration="none"` ([elastic#9218](elastic/eui#9218))
- Updated `EuiSuperDatePicker` to have a more forgiving manual input for
absolute dates. ([elastic#9199](elastic/eui#9199))

**Bug fixes**

- Updated EuiButtonGroup disabled style selectors to use
`euiDisabledSelector` to ensure high contrast mode styles apply
correctly ([elastic#9226](elastic/eui#9226))
- Updated `EuiSuperDatePicker` to ensure its pretty format button dates
are truncated correctly
([elastic#9231](elastic/eui#9231))
- Fixed a visual bug for mobile table action buttons that causes
shifting positions when changing color mode
([elastic#8231](elastic/eui#8231))
([elastic#9224](elastic/eui#9224))

**Accessibility**

- Improved the navigation of sibling `EuiToolTip` anchor elements in
NVDA browse mode by adding an `id` to ensure they are unique
([elastic#9208](elastic/eui#9208))

### `@elastic/eui-theme-borealis` v5.1.0

- Added component token `components.tableFooterBackground`
([elastic#9224](elastic/eui#9224))

---------

Co-authored-by: Jorge Sanz <[email protected]>
Co-authored-by: Lene Gadewoll <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@weronikaolejniczak weronikaolejniczak weronikaolejniczak approved these changes

Assignees

@mgadewoll mgadewoll

Labels

accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mgadewoll @elasticmachine @weronikaolejniczak