Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[EuiTooltip] a11y - fix missing tooltip content announcement#9403

Open
alexwizp wants to merge 7 commits intoelastic:mainfrom
alexwizp:feb-20
Open

[EuiTooltip] a11y - fix missing tooltip content announcement#9403
alexwizp wants to merge 7 commits intoelastic:mainfrom
alexwizp:feb-20

Conversation

@alexwizp
Copy link
Contributor

@alexwizp alexwizp commented Feb 20, 2026

Summary

This PR fixes an accessibility issue in EuiTooltip where tooltip content wasn’t consistently announced by screen readers. The root cause was delayed tooltip content rendering while aria-describedby already referenced the tooltip id, leaving assistive tech with nothing to read at the time of focus/hover.

To address this, the JS-based timeout/delay was removed in favor of CSS-driven styles for the visual delay/transition. This ensures the described element exists when aria-describedby points to it, while keeping the same UX behavior.

Key changes

  • Removed the JS timeout that delayed tooltip content mounting/rendering.
  • Implemented the delay/visibility behavior using CSS styles instead of JS timers.
  • Ensured the tooltip content is present in the DOM when referenced by aria-describedby, so screen readers can announce it reliably.

Key changes

  • Fixes missing/late announcements caused by aria-describedby referencing an element that was not yet rendered.

Why are we making this change?

Screen readers cannot announce a description that doesn’t exist yet. By removing JS-driven delayed rendering and relying on CSS for presentation, we keep the element available for assistive technologies while still achieving the intended visual timing for sighted users.

Screenshots #

Screen.Recording.2026-02-20.at.18.41.53.mov

Impact to users

Previous behavior retained

QA

Remove or strikethrough items that do not apply to your PR.

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)

calculatedPosition,
...rest
}) => {
const popover = useRef<HTMLDivElement>();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note

ref to popover is not set. As a result logic on resize not happened

Screen.Recording.2026-02-26.at.12.23.49.mov

const delayToMsMap: { [key in ToolTipDelay]: number } = {
regular: 250,
long: 250 * 5,
none: 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note

It looks like it's time to do it.

Image

@alexwizp alexwizp marked this pull request as ready for review February 26, 2026 18:52
@alexwizp alexwizp requested a review from a team as a code owner February 26, 2026 18:52
@weronikaolejniczak
Copy link
Contributor

Hey @alexwizp πŸ‘‹πŸ» I'll review this PR first thing on Monday!

@elasticmachine
Copy link
Collaborator

πŸ’š Build Succeeded

History

@elasticmachine
Copy link
Collaborator

elasticmachine commented Mar 2, 2026

πŸ’š Build Succeeded

History

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants