Skip to content

[EuiFlyout] Missing flyout title in screen reader announcement #9212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[EuiFlyout] Missing flyout title in screen reader announcement #9212

wants to merge 4 commits into from

Conversation

@alexwizp
Copy link
Contributor

@alexwizp alexwizp commented Nov 13, 2025 •
edited by mgadewoll
Loading

This PR apply the same approach to EuiFlyout that we previously implemented for EuiModal. See #8954 for more details.

Changes

  • Moves the close button from the first to the last position to ensure the flyout title is the first perceivable element.

Why are we making this change?

To improve the accessible experience of flyouts by ensuring the title is announced when the flyout opens. This provides helpful context and is more useful than landing focus on the close button.

Impact to users

🟢 There are no updates required on consumer side.

ℹ️ Due to the DOM changes, it's expected that snapshots might require updates.

QA

  • Test EuiFlyout in NVDA, JAWS, and VoiceOver and verify that:
    • The title is announced when the flyout opens (either because it receives focus or because aria-labelledby is read).
    • The screen reader hint text is perceivable (either on opening the flyout in NVDA and/or as screen-reader-only text before the close button).
    • The close button is the last navigable element in the flyout.

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)
  • 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)

@elastic elastic deleted a comment from elasticmachine Nov 14, 2025
@elastic elastic deleted a comment from elasticmachine Nov 14, 2025
@alexwizp alexwizp marked this pull request as ready for review November 14, 2025 12:51
@alexwizp alexwizp requested a review from a team as a code owner November 14, 2025 12:51
weronikaolejniczak
weronikaolejniczak reviewed Nov 14, 2025
View reviewed changes
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

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

Thank you for the contribution, Aliaksei! 🙏🏻

Testing

I only have some doubts about the NVDA...

✅ VoiceOver + Safari (MacOS)

Kapture.2025-11-14.at.14.50.46.mp4

⚠️ NVDA + Chrome (Win)

Kapture.2025-11-14.at.14.54.43.mp4

Reads the whole flyout on opening. Is this expected behavior? What if the flyout content is long?

I see that the same doesn't happen for EuiModal (#8954).

Before:

Kapture.2025-11-14.at.14.58.11.mp4

⚠️ NVDA + Firefox (Win)

Kapture.2025-11-14.at.14.56.56.mp4

✅ JAWS + Chrome (Win)

No audio, it announces "Toggle flyout button. To activate press Enter.
Enter Flyout header heading level 2. You are in a modal dialog. Press Escape or Tab / Click outside the dialog to close."

Kapture.2025-11-14.at.15.06.21.mp4

✅ JAWS + Firefox (Win)

Kapture.2025-11-14.at.15.08.24.mp4

@alexwizp
Copy link
Contributor Author

alexwizp commented Nov 19, 2025 •
edited
Loading

@weronikaolejniczak I think this is related to the data-autofocus attribute, which we set for EuiFlyout but not for EuiModal. NVDA may be trying to read the entire content of the element that receives focus.

However, I don’t think this is a significant issue, because we normally recommend setting either aria-labelledby or aria-label for each EuiFlyout. That should override this behavior. I don’t have NVDA available to verify this, though.

@weronikaolejniczak
Copy link
Contributor

weronikaolejniczak commented Nov 20, 2025

@alexwizp it doesn't seem to override it:

Kapture.2025-11-20.at.17.32.26.mp4

I'm testing this example, it uses aria-labelledby.

I also tried aria-label="Hello world", it just reads it additionally:

Screenshot 2025-11-20 at 17 33 55

@elasticmachine
Copy link
Collaborator

elasticmachine commented Nov 21, 2025

💚 Build Succeeded

History

@elasticmachine
Copy link
Collaborator

elasticmachine commented Nov 21, 2025

💔 Build Failed

Failed CI Steps

History

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

Reviewers

@weronikaolejniczak weronikaolejniczak weronikaolejniczak left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@alexwizp @weronikaolejniczak @elasticmachine