[Streams] Fix VoiceOver announcement of "Add attachments" flyout (#224746)#267805
Merged
Conversation
rStelmach
added
release_note:skip
|
Pinging @elastic/obs-onboarding-team (Team:obs-onboarding) |
Contributor
ApprovabilityVerdict: Needs human review Simple accessibility fix replacing You can customize Macroscope's approvability policy. Learn more. |
cesco-f
approved these changes
May 6, 2026
|
|
||
| const flyoutTitleId = useGeneratedHtmlId({ | ||
| prefix: 'addAttachmentFlyoutTitle', | ||
| const flyoutTitleLabel = i18n.translate('xpack.streams.addAttachmentFlyout.flyoutHeaderLabel', { |
Contributor
There was a problem hiding this comment.
nit: now that the hook is gone, this variable can be moved to module scope.
…flyout-announced-incorrectly-on-individual-streams-page
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
History
|
ersin-erdal
pushed a commit
to ersin-erdal/kibana
that referenced
this pull request
May 6, 2026
…stic#224746) (elastic#267805) closes elastic#224746 ## Summary When a screen reader user opened the **Add attachments** flyout on the individual stream page (Attachments tab → "Add attachment" button), VoiceOver announced the dialog as just *"…modal dialog…"* with no accessible name — leaving non-sighted users with no idea which dialog they had just entered. The flyout already had `aria-labelledby` pointing to the `<h2>` header, but in practice VoiceOver + WebKit silently failed to compute the accessible name from that IDREF (the id contained colons from React's `useId()`), and there was no fallback. The result was an empty accessible name, which violates **WCAG 2.1 SC 1.3.1 — Info and Relationships (Level A)**. ### Fix Replaced `aria-labelledby` (which silently resolved to an empty accessible name in VoiceOver) with a direct `aria-label` on `EuiFlyout`, sourced from the same i18n string as the visible `<h2>` heading. VoiceOver now announces: > **"Add attachments, dialog, with 6 items. You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close…"** <img width="2359" height="1266" alt="image" src="https://github.com/user-attachments/assets/10ae6d6d-0f13-4d64-81c7-ccda1720bdf7" /> The visible `<h2>` heading is preserved for sighted users; the i18n constant is shared between the visible text and the accessible name so they cannot drift. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #224746
Summary
When a screen reader user opened the Add attachments flyout on the individual stream page (Attachments tab → "Add attachment" button), VoiceOver announced the dialog as just "…modal dialog…" with no accessible name — leaving non-sighted users with no idea which dialog they had just entered.
The flyout already had
aria-labelledbypointing to the<h2>header, but in practice VoiceOver + WebKit silently failed to compute the accessible name from that IDREF (the id contained colons from React'suseId()), and there was no fallback. The result was an empty accessible name, which violates WCAG 2.1 SC 1.3.1 — Info and Relationships (Level A).Fix
Replaced
aria-labelledby(which silently resolved to an empty accessible name in VoiceOver) with a directaria-labelonEuiFlyout, sourced from the same i18n string as the visible<h2>heading.VoiceOver now announces:
The visible
<h2>heading is preserved for sighted users; the i18n constant is shared between the visible text and the accessible name so they cannot drift.