[PR feedback] Site menu aria-label

cee-chen · cee-chen · commit c9e663483f57 · 2023-08-11T12:18:22.000-07:00
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
@@ -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
@@ -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}
