[EuiFlyout] Missing flyout title in screen reader announcement

[alexwizp]

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 86f35fd
• Documentation website
• Storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 86f35fd

[weronikaolejniczak]

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