[EuiFlyout] Title is not announced in VoiceOver on Chrome
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Reported by**
@seialkali
**Describe the bug**
When using `EuiFlyout` with `aria-labelledby` set to the flyout heading (as recommended in the EUI docs), the flyout title is not announced by VoiceOver in Chrome when the flyout opens. Instead, only the `aria-describedby` text (e.g. “You are in a non-modal dialog…”) is announced.
This behavior also occurs in the [EUI Flyout examples in the docs](https://eui.elastic.co/docs/components/containers/flyout/). As a result, screen reader users do not hear the flyout title announced on open in Chrome + VoiceOver, even though the title is visually present and programmatically associated via `aria-labelledby`.
**Impact and severity**
**End-user impact:** Yes
**Severity**: Moderate accessibility issue.
Screen reader users (specifically VoiceOver users in Chrome) do not get the flyout title announced on entry, which makes it harder to understand context (e.g. “Create rule”, “Edit rule”) when the flyout opens.
Even when tabbing through the content in the flyout, any header content seems to get skipped and only the body content is announced, so users may never hear the flyout title announced.
**Workaround**:
Setting `aria-label` directly on `EuiFlyout` causes the label to be announced immediately, but this duplicates visible text and diverges from the documented recommendation to use `aria-labelledby`.
**Environment and versions**
- **EUI version**: Latest
- **Browser**: Chrome
- **Operating System**: macOS
- **Assistive Technology**: VoiceOver
**To Reproduce**
1) Open Chrome on macOS
2) Navigate to the [flyout docs page](https://eui.elastic.co/docs/components/containers/flyout/)
3) Enable VoiceOver
4) Open any flyout example
5) Listen to the announcement when the flyout opens and you should notice that the flyout title is not announced
**Expected behavior**
When the flyout opens, VoiceOver should announce the flyout title referenced by `aria-labelledby` (e.g. “Create rule”) along with the dialog role.
**Additional context (Optional)**
Findings by @tkajtoch in [this Slack thread](https://elastic.slack.com/archives/C7QC1JV6F/p1769092431949459):
Based on [this answer](https://github.com/nvaccess/nvda/issues/13224#issuecomment-1009913977) to an NVDA issue on this topic, it's likely an expected behavior, because the element referenced in `aria-labelledby` would be read anyway with moving through the page. It might be a way to deduplicate read information.
When `aria-label` is set on `EuiFlyout` it gets announced straight away.
From what I can see, JAWS, NVDA and Safari with VoiceOver can all properly see the flyout title text and read it when navigating through the flyout content. Chrome with VoiceOver seems to ignore the flyout title text, though, which I believe is the reason why this a11y issue got created. I believe this might be a bug in Chrome, but so far I haven't found any external issues that would make it clear.
It’s also worth noting that the spec says that these would not be announced if the element is non-interactive, as non-modals (and our non-push flyouts) are. If that’s the reasoning of chrome, I don’t know why it would read the content of the Flyout but ignore the title…
Contributor guide
Assessment
This issue has not been assessed yet.