[EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation

changelogs/upcoming/7740.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Updated `EuiCollapsedNavButton` with improved context for screen reader navigation

src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons 1`] = `
       class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
     >
       <button
-        aria-label="Some solution"
+        aria-label="Some solution, quick navigation menu"
         class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
         data-test-subj="euiCollapsedNavButton"
         type="button"
@@ -33,7 +33,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons 1`] = `
       class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
     >
       <button
-        aria-label="Solution view"
+        aria-label="Solution view, quick navigation menu"
         class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
         data-test-subj="euiCollapsedNavButton"
         type="button"

src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx

@@ -61,7 +61,7 @@ describe('KibanaCollapsibleNavSolution', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
 
-    fireEvent.click(getByLabelText('Solution view'));
+    fireEvent.click(getByLabelText('Solution view, quick navigation menu'));
     await waitForEuiPopoverOpen();
     expect(getByText('Some other solution')).toBeInTheDocument();
 

src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`EuiCollapsibleNavItem renders a collapsed button icon when in a collaps
   data-test-subj="test subject string"
 >
   <button
-    aria-label="Item"
+    aria-label="Item, quick navigation menu"
     class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
     data-test-subj="euiCollapsedNavButton"
     type="button"

src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
     >
       <button
         aria-describedby="generated-id"
-        aria-label="Nav item"
+        aria-label="Nav item, quick navigation menu"
         class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
         data-test-subj="euiCollapsedNavButton"
         type="button"
@@ -55,7 +55,7 @@ exports[`EuiCollapsedNavButton renders isSelected 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
   >
     <a
-      aria-label="Nav item"
+      aria-label="Nav item, quick navigation menu"
       class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton-isSelected"
       data-test-subj="euiCollapsedNavButton"
       href="#"

src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`EuiCollapsedNavItem renders a popover if items are passed 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
   >
     <button
-      aria-label="Item"
+      aria-label="Item, quick navigation menu"
       class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
       data-test-subj="euiCollapsedNavButton"
       type="button"
@@ -32,7 +32,7 @@ exports[`EuiCollapsedNavItem renders an icon button/link if href is passed 1`] =
   data-test-subj="test subject string"
 >
   <a
-    aria-label="Item"
+    aria-label="Item, quick navigation menu"
     class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
     data-test-subj="euiCollapsedNavButton"
     href="#"

src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
         class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
       >
         <button
-          aria-label="Item"
+          aria-label="Item, quick navigation menu"
           class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
           data-test-subj="euiCollapsedNavButton"
           type="button"

src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx

@@ -23,6 +23,7 @@ import {
   euiCollapsedNavButtonStyles,
   euiCollapsedNavItemTooltipStyles,
 } from './collapsed_nav_button.styles';
+import { useEuiI18n } from '../../../i18n';
 
 export const EuiCollapsedNavButton: FunctionComponent<
   Omit<
@@ -63,6 +64,12 @@ export const EuiCollapsedNavButton: FunctionComponent<
     hideToolTip && tooltipStyles.hidden,
   ];
 
+  const buttonIconAriaLabel = useEuiI18n(
+    'euiCollapsedNavButton.ariaLabelButtonIcon',
+    '{title}, quick navigation menu',
+    { title }
+  );
+
   return (
     <EuiToolTip
       content={title}
@@ -77,7 +84,7 @@ export const EuiCollapsedNavButton: FunctionComponent<
         color="text"
         href={href}
         onClick={onClick}
-        aria-label={title}
+        aria-label={buttonIconAriaLabel}
         {...(linkProps as EuiButtonIconPropsForAnchor)} // Exclusive union shenanigans
         className={buttonClassName}
         css={buttonCssStyles}