[EuiFlyout] Missing flyout title in screen reader announcement

[alexwizp]

Summary

Fixes an accessibility gap in EuiFlyout where the screen reader “region” announcement could be missing the flyout title. The flyout now ensures a reliable accessible name is present so assistive tech announces the flyout with its title instead of only announcing a generic region.

Why are we making this change?

Even when a dialog name is provided, the screen reader ignores it in the current implementation. If we move the interactive buttons lower in the DOM, the expected behavior is restored.

We previously implemented a similar fix for EuiModal (see #8954) and also made an initial attempt to address this issue in EuiFlyout (see #9212).

More context

During our initial attempt to resolve this issue, we encountered a problem (see #9212 (review)) where NVDA announced the entire flyout body when the flyout opened . This occurred because, by default, NVDA is configured to announce all focusable elements. In our case, the body container was assigned tabIndex="0", which caused it to receive focus and triggered the unintended announcement.

To address this behavior:

• added role="region" to the scrollable container, following the guidance provided by MDN for scrollable content areas:
  http://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role#scrolling_content_areas_with_overflow_text

• introduced a default aria-label to prevent NVDA from announcing the entire body content for users who have enabled the option to automatically read focusable elements.

Screens

NVDA

Impact to users

ℹ️ Affects UX for keyboard users - focus on the close button will be at the end.
ℹ️ Due to the DOM changes, it's expected that snapshots might require updates.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• 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)

[alexwizp]

Note

The key change is that PR is here

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: fefcddf
• Documentation website
• Storybook

History

• 💚 Build #2759 succeeded 711ee03
• 💚 Build #2748 succeeded b3335ec
• 💚 Build #2747 succeeded 976f792
• 💚 Build #2744 succeeded d19dc71

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: fefcddf

History

• 💚 Build #5867 succeeded 711ee03
• 💚 Build #5857 succeeded b3335ec
• 💔 Build #5853 failed d19dc71

[tkajtoch]

Changes look and work good 🚢