From 165396636d314c962f4594f959efeea5fd614842 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 13:51:02 -0700
Subject: [PATCH 1/9] [misc cleanup] move props that don't need to be after
 `...rest` to before rest

- these props are already extracted out and don't exist in `...rest`, so there's nothing to override
---
 src/components/flyout/flyout.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 4a7b132aa51..fdc4cd58a09 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -409,15 +409,15 @@ export const EuiFlyout = forwardRef(
         {...focusTrapProps}
       >
         <Element
+          className={classes}
           css={cssStyles}
+          style={newStyle}
+          ref={setRef}
           {...(rest as ComponentPropsWithRef<T>)}
           role="dialog"
-          className={classes}
           tabIndex={0}
-          data-autofocus
           aria-describedby={!isPushed ? descriptionId : undefined}
-          style={newStyle}
-          ref={setRef}
+          data-autofocus
         >
           {!isPushed && screenReaderDescription}
           {closeButton}

From bf1e24dc04bbe2b7a6a45492119283d3ab42753f Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 13:54:47 -0700
Subject: [PATCH 2/9] Remove `dialog` role + `tabIndex` from push flyouts

Push flyouts are already not receiving screen reader specific text, and in the case of the new beta collapsible nav, the push flyout truly isn't a dialog
---
 .../__snapshots__/collapsible_nav.test.tsx.snap               | 4 ----
 .../__snapshots__/collapsible_nav_beta.test.tsx.snap          | 4 ----
 src/components/flyout/__snapshots__/flyout.test.tsx.snap      | 2 --
 src/components/flyout/flyout.tsx                              | 4 ++--
 4 files changed, 2 insertions(+), 12 deletions(-)

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 b2da0e5c7f9..8d336949826 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -276,9 +276,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
       data-autofocus="true"
       id="id"
-      role="dialog"
       style="inline-size: 320px;"
-      tabindex="0"
     />
   </div>
   <div
@@ -359,9 +357,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
       data-autofocus="true"
       id="id"
-      role="dialog"
       style="inline-size: 320px;"
-      tabindex="0"
     />
   </div>
   <div
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index 68649e2973f..7b9ef2db711 100644
--- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -40,9 +40,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
         data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
-        role="dialog"
         style="inline-size: 248px;"
-        tabindex="0"
       >
         Nav content
       </nav>
@@ -95,9 +93,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
         data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
-        role="dialog"
         style="inline-size: 48px;"
-        tabindex="0"
       >
         Nav content
       </nav>
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index b2a42f72049..70b4f1643c6 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -1060,8 +1060,6 @@ Array [
     <div
       class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-right"
       data-autofocus="true"
-      role="dialog"
-      tabindex="0"
     >
       <button
         aria-label="Close this dialog"
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index fdc4cd58a09..325cd981bd6 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -414,8 +414,8 @@ export const EuiFlyout = forwardRef(
           style={newStyle}
           ref={setRef}
           {...(rest as ComponentPropsWithRef<T>)}
-          role="dialog"
-          tabIndex={0}
+          role={!isPushed ? 'dialog' : rest.role}
+          tabIndex={!isPushed ? 0 : rest.tabIndex}
           aria-describedby={!isPushed ? descriptionId : undefined}
           data-autofocus
         >

From d84f0c658aa44f22b4333f5a70e1fdc8c5eaf77a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 13:57:26 -0700
Subject: [PATCH 3/9] Remove unnecessary `data-autofocus` prop from push
 flyouts

- only used if the focus trap is enabled, and it's not, so we should just lose it
---
 .../collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap | 2 --
 .../__snapshots__/collapsible_nav_beta.test.tsx.snap            | 2 --
 src/components/flyout/__snapshots__/flyout.test.tsx.snap        | 1 -
 src/components/flyout/flyout.tsx                                | 2 +-
 4 files changed, 1 insertion(+), 6 deletions(-)

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 8d336949826..0c74dfef51e 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -274,7 +274,6 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
   >
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
-      data-autofocus="true"
       id="id"
       style="inline-size: 320px;"
     />
@@ -355,7 +354,6 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
   >
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
-      data-autofocus="true"
       id="id"
       style="inline-size: 320px;"
     />
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index 7b9ef2db711..a086672c581 100644
--- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -37,7 +37,6 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
       <nav
         aria-label="aria-label"
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
-        data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 248px;"
@@ -90,7 +89,6 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
     >
       <nav
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
-        data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 48px;"
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 70b4f1643c6..800ec2a6871 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -1059,7 +1059,6 @@ Array [
   >
     <div
       class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-right"
-      data-autofocus="true"
     >
       <button
         aria-label="Close this dialog"
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 325cd981bd6..224d1a3677b 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -417,7 +417,7 @@ export const EuiFlyout = forwardRef(
           role={!isPushed ? 'dialog' : rest.role}
           tabIndex={!isPushed ? 0 : rest.tabIndex}
           aria-describedby={!isPushed ? descriptionId : undefined}
-          data-autofocus
+          data-autofocus={!isPushed || undefined}
         >
           {!isPushed && screenReaderDescription}
           {closeButton}

From 0d7df8a6ad30e9f4379afe7d1fd27e4447c19e53 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 14:03:42 -0700
Subject: [PATCH 4/9] [misc enhancement] Allow consumers to pass custom
 `aria-describedby` IDs to flyouts

---
 src/components/flyout/flyout.test.tsx | 19 +++++++++++++++++++
 src/components/flyout/flyout.tsx      |  4 +++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
index eb8990f2785..b0b3480e654 100644
--- a/src/components/flyout/flyout.test.tsx
+++ b/src/components/flyout/flyout.test.tsx
@@ -71,6 +71,25 @@ describe('EuiFlyout', () => {
     ).toBeFalsy();
   });
 
+  it('allows setting custom aria-describedby attributes', () => {
+    const { getByTestSubject } = render(
+      <>
+        <EuiFlyout
+          onClose={() => {}}
+          aria-describedby="custom-test-id"
+          data-test-subj="flyout"
+        />
+        <div id="custom-test-id" hidden>
+          This flyout does X, Y, and Z
+        </div>
+      </>
+    );
+    expect(getByTestSubject('flyout')).toHaveAttribute(
+      'aria-describedby',
+      'generated-id custom-test-id'
+    );
+  });
+
   describe('props', () => {
     test('hideCloseButton', () => {
       const component = mount(<EuiFlyout onClose={() => {}} hideCloseButton />);
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 224d1a3677b..b506c50a07b 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -183,6 +183,7 @@ export const EuiFlyout = forwardRef(
       pushMinBreakpoint = 'l',
       focusTrapProps: _focusTrapProps = {},
       includeFixedHeadersInFocusTrap = true,
+      'aria-describedby': _ariaDescribedBy,
       ...rest
     }: EuiFlyoutProps<T>,
     ref:
@@ -349,6 +350,7 @@ export const EuiFlyout = forwardRef(
      */
     const hasOverlayMask = ownFocus && !isPushed;
     const descriptionId = useGeneratedHtmlId();
+    const ariaDescribedBy = classnames(descriptionId, _ariaDescribedBy);
 
     const screenReaderDescription = (
       <EuiScreenReaderOnly>
@@ -416,7 +418,7 @@ export const EuiFlyout = forwardRef(
           {...(rest as ComponentPropsWithRef<T>)}
           role={!isPushed ? 'dialog' : rest.role}
           tabIndex={!isPushed ? 0 : rest.tabIndex}
-          aria-describedby={!isPushed ? descriptionId : undefined}
+          aria-describedby={!isPushed ? ariaDescribedBy : _ariaDescribedBy}
           data-autofocus={!isPushed || undefined}
         >
           {!isPushed && screenReaderDescription}

From 39b5bf3507361e9b20251a8d27842be5e9643c82 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 14:32:15 -0700
Subject: [PATCH 5/9] [EuiCollapsibleNavBeta] Add an `aria-label` for overlay
 mode only

---
 .../__snapshots__/collapsible_nav_beta.test.tsx.snap        | 1 +
 .../collapsible_nav_beta/collapsible_nav_beta.tsx           | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index a086672c581..616ea99ed7c 100644
--- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -177,6 +177,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full
     >
       <nav
         aria-describedby="generated-id"
+        aria-label="Site navigation"
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNavBeta-left-isOverlayFullWidth"
         data-autofocus="true"
         id="generated-id_euiCollapsibleNav"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index 555b62a04e0..f19903a4502 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -23,6 +23,7 @@ import { mathWithUnits, logicalStyle } from '../../global_styling';
 
 import { CommonProps } from '../common';
 import { EuiFlyout, EuiFlyoutProps } from '../flyout';
+import { useEuiI18n } from '../i18n';
 import { euiHeaderVariables } from '../header/header.styles';
 
 import { EuiCollapsibleNavContext } from './context';
@@ -156,6 +157,10 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
     conditionalId: id,
     suffix: 'euiCollapsibleNav',
   });
+  const dialogAriaLabel = useEuiI18n(
+    'euiCollapsibleNavBeta.ariaLabel',
+    'Site navigation'
+  );
 
   const buttonRef = useRef<HTMLDivElement | null>(null);
   const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = useMemo(
@@ -183,6 +188,7 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
   // Wait for any fixed headers to be queried before rendering (prevents position jumping)
   const flyout = fixedHeadersCount !== false && (
     <EuiFlyout
+      aria-label={isOverlay ? dialogAriaLabel : undefined} // Overlay flyouts are dialogs and need a label. Push flyouts are not dialogs.
       {...rest} // EuiCollapsibleNav is significantly less permissive than EuiFlyout
       id={flyoutID}
       css={cssStyles}

From 7a6a831d12bd1c339f6a988f8f59bd484d16cea8 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 15:07:14 -0700
Subject: [PATCH 6/9] [Docs] Add warning about push flyout accessibility

+ misc fragment cleanup
---
 src-docs/src/views/flyout/flyout_example.js | 33 +++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index 5d78b9b2e0c..beffab1d29c 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
@@ -10,6 +10,7 @@ import {
   EuiFlyoutHeader,
   EuiFlyoutFooter,
   EuiCallOut,
+  EuiLink,
 } from '../../../../src/components';
 
 import Flyout from './flyout';
@@ -315,7 +316,7 @@ export const FlyoutExample = {
         },
       ],
       text: (
-        <Fragment>
+        <>
           <p>
             Another way to allow for continued interactions of the page content
             while a flyout is visible, is to change the <EuiCode>type</EuiCode>{' '}
@@ -329,7 +330,29 @@ export const FlyoutExample = {
             window widths. You can adjust this minimum breakpoint with{' '}
             <EuiCode>pushMinBreakpoint</EuiCode>.
           </p>
-        </Fragment>
+          <EuiCallOut
+            iconType="accessibility"
+            title="Push flyouts require manual accessibility management"
+            color="warning"
+          >
+            <p>
+              Push flyouts do not use a focus trap, do not close on Escape
+              keypress, do not inherit a{' '}
+              <EuiLink
+                href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role"
+                target="_blank"
+              >
+                dialog role
+              </EuiLink>
+              , and do not contain any of the default screen reader guidance
+              that overlay flyouts contain out-of-the-box.
+            </p>
+            <p>
+              Please be cautious when using push flyouts, and make sure you are
+              managing your own focus and screen reader UX.
+            </p>
+          </EuiCallOut>
+        </>
       ),
       snippet: flyoutPushedSnippet,
       demo: <FlyoutPush />,
@@ -344,7 +367,7 @@ export const FlyoutExample = {
         },
       ],
       text: (
-        <Fragment>
+        <>
           <p>
             By default, flyouts will continue to grow with the width of the
             window. To stop this growth at an ideal width, set{' '}
@@ -355,7 +378,7 @@ export const FlyoutExample = {
             color="warning"
             title="Note that there are some caveats to providing a maxWidth that is smaller than the minWidth."
           />
-        </Fragment>
+        </>
       ),
       snippet: flyoutMaxWidthSnippet,
       demo: <FlyoutMaxWidth />,

From 6b30b7774cc5a791b152356a1e31c1e3dc8c6475 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 10 Aug 2023 15:10:42 -0700
Subject: [PATCH 7/9] changelog

---
 upcoming_changelogs/7065.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 upcoming_changelogs/7065.md

diff --git a/upcoming_changelogs/7065.md b/upcoming_changelogs/7065.md
new file mode 100644
index 00000000000..07a99f91ef9
--- /dev/null
+++ b/upcoming_changelogs/7065.md
@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs
+
+**Accessibility**
+
+- Removed the default `dialog` role and `tabIndex` from push `EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual accessibility management.

From 3b1292d640575796bf9faf8bdea51e8b78c31163 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 11 Aug 2023 12:09:49 -0700
Subject: [PATCH 8/9] [PR feedback] copy

Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com>
---
 src-docs/src/views/flyout/flyout_example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index beffab1d29c..5097bfb0c7b 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -344,7 +344,7 @@ export const FlyoutExample = {
               >
                 dialog role
               </EuiLink>
-              , and do not contain any of the default screen reader guidance
+              , and do not include any of the default screen reader guidance
               that overlay flyouts contain out-of-the-box.
             </p>
             <p>

From c9e663483f571db68336a6638d5b4e7f51d6864a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 11 Aug 2023 12:18:22 -0700
Subject: [PATCH 9/9] [PR feedback] `Site menu` aria-label

---
 .../collapsible_nav_beta.test.tsx.snap           |  3 ++-
 .../collapsible_nav_beta.tsx                     | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index 616ea99ed7c..ca97480a43d 100644
--- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -88,6 +88,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <nav
+        aria-label="Site menu"
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
@@ -177,7 +178,7 @@ exports[`EuiCollapsibleNavBeta responsive behavior makes the overlay flyout full
     >
       <nav
         aria-describedby="generated-id"
-        aria-label="Site navigation"
+        aria-label="Site menu"
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNavBeta-left-isOverlayFullWidth"
         data-autofocus="true"
         id="generated-id_euiCollapsibleNav"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index f19903a4502..a8b5705a096 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -60,6 +60,16 @@ export type EuiCollapsibleNavBetaProps = CommonProps &
      * take up the full width of the page.
      */
     width?: number;
+    /**
+     * Overlay flyouts are considered dialogs, and dialogs must have a label.
+     * By default, a label of `Site menu` will be applied.
+     *
+     * If your usage of this component is not actually for site-wide navigation,
+     * please set your own `aria-label` or `aria-labelledby`.
+     *
+     * @default 'Site menu'
+     */
+    'aria-label'?: string;
   };
 
 export const EuiCollapsibleNavBeta: FunctionComponent<
@@ -157,9 +167,9 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
     conditionalId: id,
     suffix: 'euiCollapsibleNav',
   });
-  const dialogAriaLabel = useEuiI18n(
+  const defaultAriaLabel = useEuiI18n(
     'euiCollapsibleNavBeta.ariaLabel',
-    'Site navigation'
+    'Site menu'
   );
 
   const buttonRef = useRef<HTMLDivElement | null>(null);
@@ -188,7 +198,7 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
   // Wait for any fixed headers to be queried before rendering (prevents position jumping)
   const flyout = fixedHeadersCount !== false && (
     <EuiFlyout
-      aria-label={isOverlay ? dialogAriaLabel : undefined} // Overlay flyouts are dialogs and need a label. Push flyouts are not dialogs.
+      aria-label={defaultAriaLabel}
       {...rest} // EuiCollapsibleNav is significantly less permissive than EuiFlyout
       id={flyoutID}
       css={cssStyles}