[EuiCopy] Trigger tooltip imperatively#9650
Conversation
weronikaolejniczak
changed the title
There was a problem hiding this comment.
Pull request overview
This PR fixes a regression where EuiCopy no longer reliably shows the post-copy tooltip message after recent EuiToolTip behavior changes, and improves accessibility feedback by announcing copy confirmation via a live region.
Changes:
- Adds an imperative
showToolTip()call after a successful copy state update to ensure the tooltip displays whenbeforeMessageis empty/undefined. - Adds
EuiScreenReaderLiveoutput to announce theafterMessageindependently of tooltip focus/hover behavior. - Updates/extends unit tests and adds a changelog entry documenting the fix and a11y improvement.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/eui/src/components/copy/copy.tsx | Imperatively triggers tooltip after copy; adds screen reader live announcement state/rendering. |
| packages/eui/src/components/copy/copy.test.tsx | Adjusts tooltip-related assertions and adds a test for aria-live announcements. |
| packages/eui/changelogs/upcoming/9650.md | Documents the bug fix and accessibility improvement for EuiCopy. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
weronikaolejniczak
force-pushed
the
fix/copy-tooltip
branch
from
99e6050 to
62493e4
Compare
There was a problem hiding this comment.
Code looks correct, both implementation and tests changes. But i found a behavior that i think is unexpected.
In summary, tabbing away from the button (Tab when focused) after clicking hitting Enter will not clear the 'copied' state, so tabbing back (Shift+Tab) will show the "Copied!" tooltip again (clip 1).
Also, when beforeMessege is set, it won't show while tabbing in, if no mouse-over has previously happened, and the behavior described above is present as well (clip 2).
Some testing with screen readers yielded mixed results for me (i believe it's related to the same issue):
- NVDA/Edge: "Copied!" is announced twice
- VoiceOver/Safari: "Copied!" is not being announced
- VoiceOver/Chrome: no issues found
(did not test with JAWS)
Kapture.2026-05-13.at.16.30.47.mp4
Kapture.2026-05-13.at.16.31.52.mp4
|
@acstll that's a great catch! I have no idea how I missed this. The solution was to reset the tooltip on blur: Kapture.2026-05-14.at.11.42.57.mp4Now tabbing into and out of the trigger shows the tooltip appropriately. 🟢 VoiceOver/Safari: Kapture.2026-05-14.at.12.13.24.mp4🟢 VoiceOver/Chrome: Kapture.2026-05-14.at.12.14.56.mp4🟢 NVDA/Edge: Kapture.2026-05-14.at.12.16.31.mp4🟢 NVDA/Firefox: Kapture.2026-05-14.at.12.18.20.mp4🟢 JAWS/Edge: 🔊 Kapture.2026-05-14.at.12.25.49.mp4 |
| disableScreenReaderOutput={ | ||
| isCopied || !!tooltipProps?.disableScreenReaderOutput | ||
| } | ||
| > | ||
| {children(this.copy)} | ||
| </EuiToolTip> | ||
| {/* Stable `aria-live` region so VoiceOver/Safari announces reliably. | ||
| `EuiScreenReaderLive` alternates `aria-live` between "off" and active which | ||
| Safari ignores when attribute and content change in the same render. */} | ||
| <EuiScreenReaderOnly> | ||
| <div aria-live="assertive" aria-atomic="true"> | ||
| {isCopied ? afterMessage : ''} | ||
| </div> | ||
| </EuiScreenReaderOnly> |
There was a problem hiding this comment.
Suppressing the SR output in this case would be an a11y violation. Let's leave it as is and we can always easily update in the future if any consumer raises this concern.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
💚 Build SucceededHistory
|
💚 Build Succeeded
History
|
acstll
left a comment
acstll
left a comment
There was a problem hiding this comment.
🟢 Thanks for addressing the feedback, super clean fix 👌 (loved the casing in "bEFORE MESSAGE" 🤘)
Summary
showToolTipafter the copy trigger has been clicked.undefinedcontent but relies on the value being flipped fromundefinedto truthy after the trigger is focused/hovered.EuiToolTipdoesn't account for dynamic content change anymore because of the(!content && !title) return;guard inshowToolTip. The way to fix it is by callingshowToolTipafter the trigger has been clicked.EuiScreenReaderLiveto announce theafterMessageindependently of the tooltip. Tooltip won't be re-announced when its content changes dynamically. That's an a11y issue.API Changes
N/A
Screenshots
Kapture.2026-05-12.at.20.05.43.mp4
Kapture.2026-05-12.at.20.06.19.mp4
Impact Assessment
Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.
Impact level: 🟢 None
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
EuiToolTipshows on clicking the trigger with "Copied!" message (beforeMessageisundefined)EuiToolTipshowsbeforeMessageon hover and updates to "Copied!" on clicking the triggerChecklist before marking Ready for Review
light/dark modes, high contrast, mobile,Chrome/Safari/Edge/Firefox, keyboard-only, screen readerQA: Tested in CodeSandbox and KibanaQA: Tested docs changesCypress, and VRTBreaking changes: Addedbreaking changelabel (if applicable)Reviewer checklist