[EuiToolTip] [A11y] Tooltip content not announced in Chrome when rendered inside EuiFlyout
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Reported by**
@seialkali
**Describe the bug**
Tooltips (`EuiToolTip` / `EuiIconTip`) rendered inside a `EuiFlyout` are not always announced by screen readers in Chrome, even though tooltips outside of a flyout behave as expected.
This issue appears to be specific to tooltips rendered inside a flyout that traps focus. The same tooltip component, when placed directly on the page or inside a `type="push"` flyout, is announced correctly. However, it is still not guaranteed to work inside a `type="push"` flyout, as you can see in the codesandbox below.
**Impact and severity**
**End-user impact**: Yes.
**Severity**: Moderate accessibility issue.
Screen reader users in Chrome are unable to access tooltip content when the tooltip trigger is inside a non-push flyout. This can result in missing explanatory or critical contextual information.
Tooltips are commonly used to explain form fields, icons, and actions. If the tooltip content is not announced, users may be blocked from understanding the UI.
**Environment and versions**
- **EUI version**: Latest
- **Browser**: Chrome
- **Operating System**: macOS
- **Assistive Technology**: VoiceOver
**Minimum reproducible sandbox**
https://codesandbox.io/p/sandbox/pedantic-rain-yhkv4f?file=%2Fdemo.tsx
**To Reproduce**
1) Open the sandbox link above in Chrome on macOS
2) Enable VoiceOver
3) Press the button in the demo to open the `EuiFlyout`
4) Navigate to a tooltip trigger inside the flyout
5) Attempt to read or interact with the tooltip content
Current VoiceOver announcement:
The result when you press the keyboard command for to interact with the content:
**Expected behavior**
When the tooltip trigger receives focus, VoiceOver should allow the user the hear the tooltip content, either directly or via keyboard command.
**Additional context (Optional)**
- **Chrome**: tooltip content inside non-push flyouts is ignored
- **Safari + VoiceOver**: tooltip content is announced as expected
- Tooltip behavior is correct when not inside a flyout
Contributor guide
Assessment
This issue has not been assessed yet.