From 22dd9f2c9a8d744db887ab73ae80b938ed5b70e6 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 7 May 2024 13:11:56 +0300
Subject: [PATCH 1/5] [EuiCollapsedNavButton][a11y] Update `aria-label` for
 enhanced screen reader navigation

Closes: https://github.com/elastic/security-team/issues/8947
---
 .../collapsible_nav_kibana_solution.test.tsx.snap        | 4 ++--
 .../collapsible_nav_kibana_solution.test.tsx             | 2 +-
 .../__snapshots__/collapsible_nav_item.test.tsx.snap     | 2 +-
 .../__snapshots__/collapsed_nav_button.test.tsx.snap     | 4 ++--
 .../__snapshots__/collapsed_nav_item.test.tsx.snap       | 4 ++--
 .../__snapshots__/collapsed_nav_popover.test.tsx.snap    | 2 +-
 .../collapsed/collapsed_nav_button.tsx                   | 9 ++++++++-
 7 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap b/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
index 93dc7d85f4c..1c11717f5f2 100644
--- a/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
+++ b/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"
diff --git a/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx b/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx
index 502420cb107..de15fcadd5c 100644
--- a/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx
+++ b/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();
 
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
index 8cfb32c5dbc..79d2d6fbffa 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
+++ b/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"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
index 2c8d0314cc4..0bda4ce0f66 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
+++ b/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="#"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
index 166881b3fac..30df13e7e57 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
+++ b/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="#"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
index d01c21ab567..8b09e59edc3 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
+++ b/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"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
index 2a7de2b32ad..cb1c59c69f7 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
+++ b/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}

From a00085d31f01c0d70a245ba7dc7c5dae5c2da18c Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 7 May 2024 14:37:50 +0300
Subject: [PATCH 2/5] update changelog

---
 changelogs/upcoming/7740.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelogs/upcoming/7740.md

diff --git a/changelogs/upcoming/7740.md b/changelogs/upcoming/7740.md
new file mode 100644
index 00000000000..37b3ee7b029
--- /dev/null
+++ b/changelogs/upcoming/7740.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- [EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation

From be21e0cd06e8697ffb1ca726546af2f44f81cee5 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 7 May 2024 08:48:56 -0700
Subject: [PATCH 3/5] [PR feedback] changelog copy

---
 changelogs/upcoming/7740.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/changelogs/upcoming/7740.md b/changelogs/upcoming/7740.md
index 37b3ee7b029..1e93416872c 100644
--- a/changelogs/upcoming/7740.md
+++ b/changelogs/upcoming/7740.md
@@ -1,3 +1,3 @@
-**Bug fixes**
+**Accessibility**
 
-- [EuiCollapsedNavButton][a11y] Update aria-label for enhanced screen reader navigation
+- Updated `EuiCollapsedNavButton` with improved context for screen reader navigation

From 75eb08e40082a4ae696718bae6d53e9af48f0c6a Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 7 May 2024 09:49:40 -0700
Subject: [PATCH 4/5] [PR feedback] Trying out punctuation change in JAWS

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
---
 .../collapsible_nav_item/collapsed/collapsed_nav_button.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
index cb1c59c69f7..87d0ff76cc5 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
@@ -66,7 +66,7 @@ export const EuiCollapsedNavButton: FunctionComponent<
 
   const buttonIconAriaLabel = useEuiI18n(
     'euiCollapsedNavButton.ariaLabelButtonIcon',
-    '"{title}" quick navigation menu',
+    '{title}, quick navigation menu',
     { title }
   );
 

From 275745836b5ada17651e66af79e181c7e2b1e4a0 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 7 May 2024 21:53:27 +0300
Subject: [PATCH 5/5] update snapshots

---
 .../collapsible_nav_kibana_solution.test.tsx.snap             | 4 ++--
 .../_kibana_solution/collapsible_nav_kibana_solution.test.tsx | 2 +-
 .../__snapshots__/collapsible_nav_item.test.tsx.snap          | 2 +-
 .../__snapshots__/collapsed_nav_button.test.tsx.snap          | 4 ++--
 .../collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap  | 4 ++--
 .../__snapshots__/collapsed_nav_popover.test.tsx.snap         | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap b/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
index 1c11717f5f2..c1745228514 100644
--- a/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
+++ b/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\\" quick navigation menu"
+        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\\" quick navigation menu"
+        aria-label="Solution view, quick navigation menu"
         class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
         data-test-subj="euiCollapsedNavButton"
         type="button"
diff --git a/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx b/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx
index de15fcadd5c..0fed6686bcf 100644
--- a/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.test.tsx
+++ b/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" quick navigation menu'));
+    fireEvent.click(getByLabelText('Solution view, quick navigation menu'));
     await waitForEuiPopoverOpen();
     expect(getByText('Some other solution')).toBeInTheDocument();
 
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
index 79d2d6fbffa..0d1017d8ac3 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
+++ b/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\\" quick navigation menu"
+    aria-label="Item, quick navigation menu"
     class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
     data-test-subj="euiCollapsedNavButton"
     type="button"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
index 0bda4ce0f66..8d98cd4474e 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
+++ b/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\\" quick navigation menu"
+        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\\" quick navigation menu"
+      aria-label="Nav item, quick navigation menu"
       class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton-isSelected"
       data-test-subj="euiCollapsedNavButton"
       href="#"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
index 30df13e7e57..604c48b51c2 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
+++ b/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\\" quick navigation menu"
+      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\\" quick navigation menu"
+    aria-label="Item, quick navigation menu"
     class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
     data-test-subj="euiCollapsedNavButton"
     href="#"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
index 8b09e59edc3..6fc0081a4bd 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
+++ b/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\\" quick navigation menu"
+          aria-label="Item, quick navigation menu"
           class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
           data-test-subj="euiCollapsedNavButton"
           type="button"