From 7cdbe078cf052f30d11c659264fb0da2447719ff Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Thu, 2 Feb 2023 16:51:19 -0800
Subject: [PATCH] [EuiFlyout] Include all fixed `EuiHeader`s in flyout focus
 traps + improve screen reader accessibility (#6566)

* EuiFlyout - auto-shard all fixed EuiHeaders

NOT YET WORKING: autoFocus on flyout open and returnFocus

* Fix flyouts toggled from header shards not correctly focusing headers

+ a11y improvement: mirroring popovers & modals, make the flyout wrapper focusable via `tabIndex={0}`, so that screen readers take out a beat to read out the `labelledby` and (upcoming `describedby`) instead of jumping to the close button or the first focusable child (if no close button exists)

* Add screen reader instructions on interacting with the flyout

- allow for custom `role`s that consumers pass in that aren't `dialog`s (likely very rare, may need more testing)

* Deprecate `closeButtonAriaLabel` - use `closeButtonProps['aria-label']` instead

* [chore] Remove Fragment

* Write tests for new EuiHeader affordance & screen reader instructions

* [PR feedback] Remove `role` prop customization, tweak SR text accordingly
---
 .../collapsible_nav.test.tsx.snap             |  85 ++++-
 .../collapsible_nav/collapsible_nav.tsx       |   4 +-
 .../flyout/__snapshots__/flyout.test.tsx.snap | 324 ++++++++++++++----
 src/components/flyout/flyout.spec.tsx         |  77 ++++-
 src/components/flyout/flyout.test.tsx         |  63 ++--
 src/components/flyout/flyout.tsx              | 124 +++++--
 .../header/__snapshots__/header.test.tsx.snap |   1 +
 src/components/header/header.tsx              |   6 +-
 upcoming_changelogs/6566.md                   |   7 +
 9 files changed, 540 insertions(+), 151 deletions(-)
 create mode 100644 upcoming_changelogs/6566.md

diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index bae474c35c2..933e1e56d3d 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -12,11 +12,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -55,13 +64,22 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         aria-label="aria-label"
         class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         data-test-subj="test subject string"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -97,11 +115,20 @@ Array [
     data-focus-lock-disabled="false"
   >
     <nav
+      aria-describedby="generated-id"
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+      data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 240px;"
-      tabindex="-1"
+      tabindex="0"
     >
+      <p
+        class="emotion-euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a non-modal dialog. To close the dialog, press Escape. 
+      </p>
       <button
         aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -142,11 +169,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -183,11 +219,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -224,9 +269,11 @@ Array [
   >
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
+      data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size:320px"
-      tabindex="-1"
+      tabindex="0"
     />
   </div>,
   <div
@@ -249,11 +296,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -295,9 +351,11 @@ Array [
   >
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
+      data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 320px;"
-      tabindex="-1"
+      tabindex="0"
     />
   </div>,
   <div
@@ -320,11 +378,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 240px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index de9e180934c..a8ebb4c3466 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -24,7 +24,7 @@ import { EuiFlyout, EuiFlyoutProps } from '../flyout';
 // Extend all the flyout props except `onClose` because we handle this internally
 export type EuiCollapsibleNavProps = Omit<
   EuiFlyoutProps,
-  'closeButtonAriaLabel' | 'type' | 'pushBreakpoint'
+  'type' | 'pushBreakpoint'
 > & {
   /**
    * ReactNode to render as this component's content
@@ -65,7 +65,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   as = 'nav' as EuiCollapsibleNavProps['as'],
   size = 320,
   side = 'left',
-  role = null,
   ownFocus = true,
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
@@ -117,7 +116,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       as={as}
       size={size}
       side={side}
-      role={role}
       ownFocus={ownFocus}
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 524fc24cda4..def4e660f76 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -12,12 +12,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         aria-label="aria-label"
         class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         data-test-subj="test subject string"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -54,11 +62,19 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         id="imaflyout"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -95,10 +111,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-right"
@@ -135,10 +159,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="aria-label"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton testClass1 testClass2 emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -175,10 +207,19 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
-      />
+        tabindex="0"
+      >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
+      </div>
     </div>
     <div
       data-focus-guard="true"
@@ -201,10 +242,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -241,11 +290,19 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-overlay-right"
+        data-autofocus="true"
         role="dialog"
         style="max-inline-size: 1024px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -282,11 +339,19 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-overlay-right"
+        data-autofocus="true"
         role="dialog"
         style="max-inline-size: 24rem;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -323,10 +388,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -363,10 +436,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -403,10 +484,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -442,10 +531,18 @@ Array [
     data-focus-lock-disabled="false"
   >
     <div
+      aria-describedby="generated-id"
       class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+      data-autofocus="true"
       role="dialog"
-      tabindex="-1"
+      tabindex="0"
     >
+      <p
+        class="emotion-euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a non-modal dialog. To close the dialog, press Escape. 
+      </p>
       <button
         aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -481,10 +578,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -521,10 +626,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-m-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -561,10 +674,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-none-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -601,49 +722,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-s-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
-        <button
-          aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
         >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-  </div>,
-]
-`;
-
-exports[`EuiFlyout props role can be removed 1`] = `
-Array [
-  <div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <div
-        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
-        tabindex="-1"
-      >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -680,10 +770,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-left"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -720,10 +818,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -760,11 +866,19 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
         style="inline-size: 500px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -801,10 +915,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-l-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -841,10 +963,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -881,10 +1011,18 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
+        aria-describedby="generated-id"
         class="euiFlyout emotion-euiFlyout-l-s-noMaxWidth-overlay-right"
+        data-autofocus="true"
         role="dialog"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
@@ -921,8 +1059,9 @@ Array [
   >
     <div
       class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-right"
+      data-autofocus="true"
       role="dialog"
-      tabindex="-1"
+      tabindex="0"
     >
       <button
         aria-label="Close this dialog"
@@ -946,3 +1085,64 @@ Array [
   />,
 ]
 `;
+
+exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeaders headers exist on the page 1`] = `
+<body
+  class="euiBody--headerIsFixed euiBody--hasFlyout"
+  data-fixed-headers="1"
+>
+  <div>
+    <div
+      class="euiHeader euiHeader--default euiHeader--fixed"
+      data-fixed-header="true"
+    />
+    <div>
+      <div
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          aria-describedby="generated-id"
+          aria-label="aria-label"
+          class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
+          data-autofocus="true"
+          data-test-subj="test subject string"
+          role="dialog"
+          tabindex="0"
+        >
+          <p
+            class="emotion-euiScreenReaderOnly"
+            id="generated-id"
+          >
+            You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+             
+            You can still continue tabbing through the page headers in addition to the dialog.
+          </p>
+          <button
+            aria-label="Close this dialog"
+            class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+            data-test-subj="euiFlyoutCloseButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
+        </div>
+      </div>
+      <div
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/components/flyout/flyout.spec.tsx b/src/components/flyout/flyout.spec.tsx
index 881733b5be6..34069e6be15 100644
--- a/src/components/flyout/flyout.spec.tsx
+++ b/src/components/flyout/flyout.spec.tsx
@@ -11,6 +11,7 @@
 import React, { useState } from 'react';
 
 import { EuiGlobalToastList } from '../toast';
+import { EuiHeader } from '../header';
 import { EuiFlyout } from './flyout';
 
 const childrenDefault = (
@@ -42,23 +43,17 @@ const Flyout = ({ children = childrenDefault, ...rest }) => {
 
 describe('EuiFlyout', () => {
   describe('Focus behavior', () => {
-    it('focuses the close button by default', () => {
+    it('focuses the flyout wrapper by default', () => {
       cy.mount(<Flyout />);
-      cy.focused().should(
-        'have.attr',
-        'data-test-subj',
-        'euiFlyoutCloseButton'
-      );
+      cy.focused().should('have.class', 'euiFlyout');
+      cy.focused().should('have.attr', 'data-autofocus', 'true');
     });
 
     it('traps focus and cycles tabbable items', () => {
       cy.mount(<Flyout />);
-      cy.realPress('Tab');
-      cy.realPress('Tab');
-      cy.realPress('Tab');
+      cy.repeatRealPress('Tab', 4);
       cy.focused().should('have.attr', 'data-test-subj', 'itemC');
-      cy.realPress('Tab');
-      cy.realPress('Tab');
+      cy.repeatRealPress('Tab', 3);
       cy.focused().should(
         'have.attr',
         'data-test-subj',
@@ -70,9 +65,11 @@ describe('EuiFlyout', () => {
   describe('Close behavior: standard', () => {
     it('closes the flyout when the close button is clicked', () => {
       cy.mount(<Flyout />);
-      cy.realPress('Enter').then(() => {
-        expect(cy.get('[data-test-subj="flyoutSpec"]').should('not.exist'));
-      });
+      cy.get('[data-test-subj="euiFlyoutCloseButton"]')
+        .click()
+        .then(() => {
+          expect(cy.get('[data-test-subj="flyoutSpec"]').should('not.exist'));
+        });
     });
 
     it('closes the flyout with `escape` key', () => {
@@ -161,4 +158,56 @@ describe('EuiFlyout', () => {
         });
     });
   });
+
+  describe('EuiHeader shards', () => {
+    const FlyoutWithHeader = ({ children = childrenDefault, ...rest }) => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <>
+          <EuiHeader position="fixed">
+            <button
+              data-test-subj="toggleFlyoutFromHeader"
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              Toggle flyout
+            </button>
+          </EuiHeader>
+          {isOpen ? (
+            <EuiFlyout
+              data-test-subj="flyoutSpec"
+              onClose={() => setIsOpen(false)}
+              {...rest}
+            >
+              {children}
+            </EuiFlyout>
+          ) : null}
+        </>
+      );
+    };
+
+    it('correctly focuses on the flyout wrapper when flyouts are toggled from headers', () => {
+      cy.mount(<FlyoutWithHeader />);
+      cy.get('[data-test-subj="toggleFlyoutFromHeader"]').click();
+      cy.focused().should('have.class', 'euiFlyout');
+    });
+
+    it('automatically includes fixed EuiHeaders on the page as shards, including them in the tab rotation', () => {
+      cy.mount(<FlyoutWithHeader />);
+      cy.get('[data-test-subj="toggleFlyoutFromHeader"]').click();
+      cy.repeatRealPress('Tab', 6);
+      cy.focused().should(
+        'have.attr',
+        'data-test-subj',
+        'toggleFlyoutFromHeader'
+      );
+    });
+
+    it('does not shard fixed headers if `includeFixedHeadersInFocusTrap` is set to false', () => {
+      cy.mount(<FlyoutWithHeader includeFixedHeadersInFocusTrap={false} />);
+      cy.get('[data-test-subj="toggleFlyoutFromHeader"]').click();
+      cy.repeatRealPress('Tab', 6);
+      cy.focused().should('have.class', 'euiFlyout');
+    });
+  });
 });
diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
index 90c5e6fb7d4..eb8990f2785 100644
--- a/src/components/flyout/flyout.test.tsx
+++ b/src/components/flyout/flyout.test.tsx
@@ -7,10 +7,12 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '../../test/rtl';
 import { requiredProps, takeMountedSnapshot } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
+import { EuiHeader } from '../header';
 import { EuiFlyout, SIZES, PADDING_SIZES, SIDES } from './flyout';
 
 jest.mock('../overlay_mask', () => ({
@@ -39,15 +41,37 @@ describe('EuiFlyout', () => {
     ).toMatchSnapshot();
   });
 
-  describe('props', () => {
-    test('role can be removed', () => {
-      const component = mount(<EuiFlyout onClose={() => {}} role={null} />);
+  it('renders extra screen reader instructions when fixed EuiHeaders headers exist on the page', () => {
+    const { baseElement, queryByText, rerender } = render(
+      <>
+        <EuiHeader position="fixed" />
+        <EuiFlyout {...requiredProps} onClose={() => {}} />
+      </>
+    );
 
-      expect(
-        takeMountedSnapshot(component, { hasArrayOutput: true })
-      ).toMatchSnapshot();
-    });
+    expect(baseElement).toMatchSnapshot();
+    expect(
+      queryByText(
+        'You can still continue tabbing through the page headers in addition to the dialog.',
+        { exact: false }
+      )
+    ).toBeTruthy();
+
+    // Should not shard or render instructions when `includeFixedHeadersInFocusTrap={false}
+    rerender(
+      <>
+        <EuiHeader position="fixed" />
+        <EuiFlyout onClose={() => {}} includeFixedHeadersInFocusTrap={false} />
+      </>
+    );
+    expect(
+      queryByText('You can still continue tabbing through the page headers', {
+        exact: false,
+      })
+    ).toBeFalsy();
+  });
 
+  describe('props', () => {
     test('hideCloseButton', () => {
       const component = mount(<EuiFlyout onClose={() => {}} hideCloseButton />);
 
@@ -76,29 +100,6 @@ describe('EuiFlyout', () => {
       ).toMatchSnapshot();
     });
 
-    describe('closeButtonAriaLabel', () => {
-      test('has a default label for the close button', () => {
-        const component = render(<EuiFlyout onClose={() => {}} />);
-        const label = component
-          .find('[data-test-subj="euiFlyoutCloseButton"]')
-          .prop('aria-label');
-        expect(label).toBe('Close this dialog');
-      });
-
-      test('sets a custom label for the close button', () => {
-        const component = render(
-          <EuiFlyout
-            onClose={() => {}}
-            closeButtonAriaLabel="Closes specific flyout"
-          />
-        );
-        const label = component
-          .find('[data-test-subj="euiFlyoutCloseButton"]')
-          .prop('aria-label');
-        expect(label).toBe('Closes specific flyout');
-      });
-    });
-
     test('accepts div props', () => {
       const component = mount(<EuiFlyout onClose={() => {}} id="imaflyout" />);
 
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index f1a8c75cff6..64e72ffc38e 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -14,7 +14,6 @@ import React, {
   ComponentPropsWithRef,
   CSSProperties,
   ElementType,
-  Fragment,
   FunctionComponent,
   MouseEvent as ReactMouseEvent,
   MutableRefObject,
@@ -28,6 +27,7 @@ import {
   EuiBreakpointSize,
   useIsWithinMinBreakpoint,
   useEuiTheme,
+  useGeneratedHtmlId,
 } from '../../services';
 import { logicalStyle } from '../../global_styling';
 
@@ -38,6 +38,7 @@ import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
 
@@ -93,11 +94,6 @@ interface _EuiFlyoutProps {
    * @default false
    */
   hideCloseButton?: boolean;
-  /**
-   * Specify a custom aria-label for the close button of the flyout.
-   * @default "Close this dialog"
-   */
-  closeButtonAriaLabel?: string;
   /**
    * Extends EuiButtonIconProps onto the close button
    */
@@ -130,12 +126,6 @@ interface _EuiFlyoutProps {
    * @default right
    */
   side?: _EuiFlyoutSide;
-  /**
-   * Defaults to `dialog` which is best for most cases of the flyout.
-   * Otherwise pass in your own, aria-role, or `null` to remove it and use the semantic `as` element instead
-   * @default dialog
-   */
-  role?: null | string;
   /**
    * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
    * @default l
@@ -148,6 +138,14 @@ interface _EuiFlyoutProps {
    * `closeOnMouseup` will delay the close callback, allowing time for external toggle buttons to handle close behavior.
    */
   focusTrapProps?: Pick<EuiFocusTrapProps, 'closeOnMouseup' | 'shards'>;
+  /**
+   * By default, EuiFlyout will consider any fixed `EuiHeader`s that sit alongside or above the EuiFlyout
+   * as part of the flyout's focus trap. This prevents focus fighting with interactive elements
+   * within fixed headers.
+   *
+   * Set this to `false` if you need to disable this behavior for a specific reason.
+   */
+  includeFixedHeadersInFocusTrap?: boolean;
 }
 
 const defaultElement = 'div';
@@ -172,7 +170,6 @@ export const EuiFlyout = forwardRef(
       as,
       hideCloseButton = false,
       closeButtonProps,
-      closeButtonAriaLabel,
       closeButtonPosition = 'inside',
       onClose,
       ownFocus = true,
@@ -184,9 +181,9 @@ export const EuiFlyout = forwardRef(
       maskProps,
       type = 'overlay',
       outsideClickCloses,
-      role = 'dialog',
       pushMinBreakpoint = 'l',
-      focusTrapProps,
+      focusTrapProps: _focusTrapProps = {},
+      includeFixedHeadersInFocusTrap = true,
       ...rest
     }: EuiFlyoutProps<T>,
     ref:
@@ -303,7 +300,7 @@ export const EuiFlyout = forwardRef(
               display={closeButtonPosition === 'outside' ? 'fill' : 'empty'}
               iconType="cross"
               color="text"
-              aria-label={closeButtonAriaLabel || closeAriaLabel}
+              aria-label={closeAriaLabel}
               data-test-subj="euiFlyoutCloseButton"
               {...closeButtonProps}
               className={closeButtonClasses}
@@ -317,20 +314,68 @@ export const EuiFlyout = forwardRef(
       );
     }
 
-    const hasOverlayMask = ownFocus && !isPushed;
-    const onClickOutside = (event: MouseEvent | TouchEvent) => {
-      // Do not close the flyout for any external click
-      if (outsideClickCloses === false) return undefined;
-      if (hasOverlayMask) {
-        // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-        if (event.target === maskRef.current) return onClose(event);
+    /*
+     * If not disabled, automatically add fixed EuiHeaders as shards
+     * to EuiFlyout focus traps, to prevent focus fighting
+     */
+    const flyoutToggle = useRef<Element | null>(document.activeElement);
+    const [fixedHeaders, setFixedHeaders] = useState<HTMLDivElement[]>([]);
+
+    useEffect(() => {
+      if (includeFixedHeadersInFocusTrap) {
+        const fixedHeaderEls = document.querySelectorAll<HTMLDivElement>(
+          '.euiHeader[data-fixed-header]'
+        );
+        setFixedHeaders(Array.from(fixedHeaderEls));
+
+        // Flyouts that are toggled from fixed headers do not have working
+        // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+        fixedHeaderEls.forEach((header) => {
+          if (header.contains(flyoutToggle.current)) {
+            resizeRef?.focus();
+          }
+        });
       } else {
-        // No overlay mask is present, so any outside clicks should close the flyout
-        if (outsideClickCloses === true) return onClose(event);
+        // Clear existing headers if necessary, e.g. switching to `false`
+        setFixedHeaders((headers) => (headers.length ? [] : headers));
       }
-      // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
-      return undefined;
+    }, [includeFixedHeadersInFocusTrap, resizeRef]);
+
+    const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = {
+      ..._focusTrapProps,
+      shards: [...fixedHeaders, ...(_focusTrapProps.shards || [])],
     };
+
+    /*
+     * Provide meaningful screen reader instructions/details
+     */
+    const hasOverlayMask = ownFocus && !isPushed;
+    const descriptionId = useGeneratedHtmlId();
+
+    const screenReaderDescription = (
+      <EuiScreenReaderOnly>
+        <p id={descriptionId}>
+          {hasOverlayMask ? (
+            <EuiI18n
+              token="euiFlyout.screenReaderModalDialog"
+              default="You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+            />
+          ) : (
+            <EuiI18n
+              token="euiFlyout.screenReaderNonModalDialog"
+              default="You are in a non-modal dialog. To close the dialog, press Escape."
+            />
+          )}{' '}
+          {fixedHeaders.length > 0 && (
+            <EuiI18n
+              token="euiFlyout.screenReaderFixedHeaders"
+              default="You can still continue tabbing through the page headers in addition to the dialog."
+            />
+          )}
+        </p>
+      </EuiScreenReaderOnly>
+    );
+
     /*
      * Trap focus even when `ownFocus={false}`, otherwise closing
      * the flyout won't return focus to the originating button.
@@ -343,6 +388,20 @@ export const EuiFlyout = forwardRef(
      * or if `outsideClickCloses={true}` to close on clicks that target
      * (both mousedown and mouseup) the overlay mask.
      */
+    const onClickOutside = (event: MouseEvent | TouchEvent) => {
+      // Do not close the flyout for any external click
+      if (outsideClickCloses === false) return undefined;
+      if (hasOverlayMask) {
+        // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+        if (event.target === maskRef.current) return onClose(event);
+      } else {
+        // No overlay mask is present, so any outside clicks should close the flyout
+        if (outsideClickCloses === true) return onClose(event);
+      }
+      // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+      return undefined;
+    };
+
     let flyout = (
       <EuiFocusTrap
         disabled={isPushed}
@@ -353,12 +412,15 @@ export const EuiFlyout = forwardRef(
         <Element
           css={cssStyles}
           {...(rest as ComponentPropsWithRef<T>)}
-          role={role}
+          role="dialog"
           className={classes}
-          tabIndex={-1}
+          tabIndex={0}
+          data-autofocus
+          aria-describedby={!isPushed ? descriptionId : undefined}
           style={newStyle}
           ref={setRef}
         >
+          {!isPushed && screenReaderDescription}
           {closeButton}
           {children}
         </Element>
@@ -382,10 +444,10 @@ export const EuiFlyout = forwardRef(
     }
 
     return (
-      <Fragment>
+      <>
         <EuiWindowEvent event="keydown" handler={onKeyDown} />
         {flyout}
-      </Fragment>
+      </>
     );
   }
   // React.forwardRef interferes with the inferred element type
diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
index d2b31571712..35c4a3256dd 100644
--- a/src/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`EuiHeader renders dark theme 1`] = `
 exports[`EuiHeader renders in fixed position 1`] = `
 <div
   class="euiHeader euiHeader--default euiHeader--fixed"
+  data-fixed-header="true"
 >
   <span>
     Hello!
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index b0c39251d17..c5d856ba79e 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -148,7 +148,11 @@ export const EuiHeader: FunctionComponent<EuiHeaderProps> = ({
   }
 
   return (
-    <div className={classes} {...rest}>
+    <div
+      className={classes}
+      data-fixed-header={position === 'fixed' || undefined} // Used by EuiFlyouts as a query selector
+      {...rest}
+    >
       {contents}
     </div>
   );
diff --git a/upcoming_changelogs/6566.md b/upcoming_changelogs/6566.md
new file mode 100644
index 00000000000..533ec759a6e
--- /dev/null
+++ b/upcoming_changelogs/6566.md
@@ -0,0 +1,7 @@
+- `EuiFlyout`s now automatically shard all fixed `EuiHeader`s on the page. This means that interactions (mouse & keyboard) with items inside `EuiHeader`s when flyouts are open will no longer trigger focus fighting
+- `EuiFlyout`s now read out detailed screen reader dialog instructions and hints on open
+
+**Breaking changes**
+
+- Removed the ability to customize the `role` prop of `EuiFlyout`s. `EuiFlyout`s should always be dialog roles for screen reader consistency.
+- Removed `closeButtonAriaLabel` prop from `EuiFlyout` - use `closeButtonProps['aria-label']` instead