From bc2ed3bc993a46b66b484d9242f9da7a757385f9 Mon Sep 17 00:00:00 2001
From: Yerimar <yeritachan@gmail.com>
Date: Wed, 4 Dec 2024 23:27:32 -0400
Subject: [PATCH 1/7] [EuiCollapsibleNavBeta] Added aria-hidden=true to arrow
 button (#7353)

---
 .../accordion/accordion_trigger/accordion_trigger.tsx           | 1 +
 .../__snapshots__/collapsible_nav_accordion.test.tsx.snap       | 2 ++
 .../__snapshots__/collapsible_nav_item.test.tsx.snap            | 1 +
 3 files changed, 4 insertions(+)

diff --git a/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx b/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx
index 9f0cc29efef..f5cd52a04b5 100644
--- a/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx
+++ b/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx
@@ -62,6 +62,7 @@ export const EuiAccordionTrigger: FunctionComponent<
       aria-controls={ariaControlsId}
       aria-expanded={isOpen}
       aria-labelledby={buttonId}
+      aria-hidden={buttonIsInteractive ? "true" : "false"}
       tabIndex={buttonIsInteractive ? -1 : 0}
     />
   );
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
index fff981ec06d..85a06749e97 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
     <button
       aria-controls="generated-id"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
       tabindex="-1"
@@ -98,6 +99,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
     <button
       aria-controls="generated-id"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
       tabindex="-1"
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
index 9da7f91ea2d..f8256931643 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
@@ -55,6 +55,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`]
     <button
       aria-controls="generated-id"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
       tabindex="-1"

From 765b00dffd8cce91df98cde0741469a8af3e9fd8 Mon Sep 17 00:00:00 2001
From: Yerimar <yeritachan@gmail.com>
Date: Wed, 4 Dec 2024 23:54:04 -0400
Subject: [PATCH 2/7] [EuiCollapsibleNavBeta] Fixing pre push issue (#7353)

---
 .../accordion/accordion_trigger/accordion_trigger.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx b/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx
index f5cd52a04b5..a7eea0744ee 100644
--- a/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx
+++ b/packages/eui/src/components/accordion/accordion_trigger/accordion_trigger.tsx
@@ -62,7 +62,7 @@ export const EuiAccordionTrigger: FunctionComponent<
       aria-controls={ariaControlsId}
       aria-expanded={isOpen}
       aria-labelledby={buttonId}
-      aria-hidden={buttonIsInteractive ? "true" : "false"}
+      aria-hidden={buttonIsInteractive ? 'true' : 'false'}
       tabIndex={buttonIsInteractive ? -1 : 0}
     />
   );

From 21b5aa6ad98689fe4eedf624357b7e37b696ff5c Mon Sep 17 00:00:00 2001
From: Yerimar <yeritachan@gmail.com>
Date: Wed, 4 Dec 2024 23:59:19 -0400
Subject: [PATCH 3/7] [EuiCollapsibleNavBeta] Creating new snapshots for the
 pre push fix (#7353)

---
 .../__snapshots__/accordion.test.tsx.snap      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index e78a5da860f..17d706b3cd1 100644
--- a/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`EuiAccordion is rendered 1`] = `
     <button
       aria-controls="0"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -61,6 +62,7 @@ exports[`EuiAccordion isDisabled is rendered 1`] = `
     <button
       aria-controls="21"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__arrow-left-isClosed"
       disabled=""
@@ -157,6 +159,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
     <button
       aria-controls="13"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed"
       tabindex="-1"
@@ -195,6 +198,7 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
     <button
       aria-controls="15"
       aria-expanded="false"
+      aria-hidden="true"
       aria-label="aria-label"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed-euiTestCss"
@@ -246,6 +250,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
     <button
       aria-controls="3"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -299,6 +304,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
     <button
       aria-controls="2"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -348,6 +354,7 @@ exports[`EuiAccordion props buttonElement is rendered 1`] = `
     <button
       aria-controls="10"
       aria-expanded="false"
+      aria-hidden="false"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="0"
@@ -395,6 +402,7 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
     <button
       aria-controls="4"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -446,6 +454,7 @@ exports[`EuiAccordion props buttonProps paddingSize l 1`] = `
     <button
       aria-controls="7"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -496,6 +505,7 @@ exports[`EuiAccordion props buttonProps paddingSize m 1`] = `
     <button
       aria-controls="6"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -546,6 +556,7 @@ exports[`EuiAccordion props buttonProps paddingSize s 1`] = `
     <button
       aria-controls="5"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -596,6 +607,7 @@ exports[`EuiAccordion props element is rendered 1`] = `
     <button
       aria-controls="1"
       aria-expanded="false"
+      aria-hidden="false"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="0"
@@ -643,6 +655,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
     <button
       aria-controls="11"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -699,6 +712,7 @@ exports[`EuiAccordion props forceState closed is rendered 1`] = `
     <button
       aria-controls="16"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -752,6 +766,7 @@ exports[`EuiAccordion props forceState open is rendered 1`] = `
     <button
       aria-controls="17"
       aria-expanded="true"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
       tabindex="-1"
@@ -804,6 +819,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
     <button
       aria-controls="12"
       aria-expanded="true"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
       tabindex="-1"
@@ -856,6 +872,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
     <button
       aria-controls="19"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
@@ -914,6 +931,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
     <button
       aria-controls="20"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"

From 5c41bcd9eb86a6ed1839be7968c9b987295b79b7 Mon Sep 17 00:00:00 2001
From: Yerimar <yeritachan@gmail.com>
Date: Fri, 13 Dec 2024 00:55:10 -0400
Subject: [PATCH 4/7] Adding changelog for issue #7353

---
 packages/eui/changelogs/upcoming/2.md         |   7 +
 .../collapsible_nav.test.tsx.snap             | 418 ------------------
 .../collapsible_nav_group.test.tsx.snap       |   2 +
 3 files changed, 9 insertions(+), 418 deletions(-)
 create mode 100644 packages/eui/changelogs/upcoming/2.md
 delete mode 100644 packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap

diff --git a/packages/eui/changelogs/upcoming/2.md b/packages/eui/changelogs/upcoming/2.md
new file mode 100644
index 00000000000..15629de13fc
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/2.md
@@ -0,0 +1,7 @@
+- Added aria-hidden={buttonIsInteractive ? 'true' : 'false'} tag to the accordion_trigger.tsx file, as advised in the issue description.
+
+**Accessibility**
+
+- Improved the accessibility experience of the accordion buttons so screen readers do not detect it twice.
+
+- Summary : aria-hidden={buttonIsInteractive ? 'true' : 'false'} was added to src/components/accordion/accordion_trigger/accordion_trigger.tsx in object EuiAccordionTrigger in const arrow.
\ No newline at end of file
diff --git a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
deleted file mode 100644
index 16ed32ffd1d..00000000000
--- a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ /dev/null
@@ -1,418 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiCollapsibleNav close button can be hidden 1`] = `
-<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
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
-        data-autofocus="true"
-        id="id"
-        role="dialog"
-        style="inline-size: 320px;"
-        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </nav>
-    </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>
-`;
-
-exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `<div />`;
-
-exports[`EuiCollapsibleNav is rendered 1`] = `
-<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
-      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-euiCollapsibleNav-overlay-euiTestCss"
-        data-autofocus="true"
-        data-test-subj="test subject string"
-        id="id"
-        role="dialog"
-        style="inline-size: 320px;"
-        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </nav>
-    </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>
-`;
-
-exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
-<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"
-  >
-    <nav
-      aria-describedby="generated-id"
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
-      data-autofocus="true"
-      id="id"
-      role="dialog"
-      style="inline-size: 240px;"
-      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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-        data-test-subj="euiFlyoutCloseButton"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
-    </nav>
-  </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[`EuiCollapsibleNav props button 1`] = `
-<div>
-  <button
-    aria-controls="id"
-    aria-expanded="true"
-    aria-pressed="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"
-    >
-      <nav
-        aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
-        data-autofocus="true"
-        id="id"
-        role="dialog"
-        style="inline-size: 320px;"
-        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </nav>
-    </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>
-`;
-
-exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
-<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
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
-        data-autofocus="true"
-        id="id"
-        role="dialog"
-        style="inline-size: 320px;"
-        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </nav>
-    </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>
-`;
-
-exports[`EuiCollapsibleNav props isDocked 1`] = `
-<div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <nav
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
-      id="id"
-      style="inline-size: 320px;"
-    />
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiCollapsibleNav props onClose 1`] = `
-<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
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
-        data-autofocus="true"
-        id="id"
-        role="dialog"
-        style="inline-size: 320px;"
-        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </nav>
-    </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>
-`;
-
-exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
-<div>
-  <button
-    aria-controls="id"
-    aria-expanded="true"
-    aria-pressed="true"
-  />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <nav
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
-      id="id"
-      style="inline-size: 320px;"
-    />
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiCollapsibleNav props size 1`] = `
-<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
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
-        data-autofocus="true"
-        id="id"
-        role="dialog"
-        style="inline-size: 240px;"
-        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
-          data-test-subj="euiFlyoutCloseButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
-      </nav>
-    </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>
-`;
diff --git a/packages/eui/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/packages/eui/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 7f6277f2a14..56faaf053ff 100644
--- a/packages/eui/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -236,6 +236,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
     <button
       aria-controls="id"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed"
       tabindex="-1"
@@ -300,6 +301,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
     <button
       aria-controls="id"
       aria-expanded="false"
+      aria-hidden="true"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed"
       tabindex="-1"

From 4d60d768e8b5b4d150b6517a08908c9aa11271f4 Mon Sep 17 00:00:00 2001
From: Yerimar <yeritachan@gmail.com>
Date: Fri, 13 Dec 2024 11:04:44 -0400
Subject: [PATCH 5/7] Adding changelog for main

---
 packages/eui/changelogs/upcoming/8236.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/8236.md

diff --git a/packages/eui/changelogs/upcoming/8236.md b/packages/eui/changelogs/upcoming/8236.md
new file mode 100644
index 00000000000..15629de13fc
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8236.md
@@ -0,0 +1,7 @@
+- Added aria-hidden={buttonIsInteractive ? 'true' : 'false'} tag to the accordion_trigger.tsx file, as advised in the issue description.
+
+**Accessibility**
+
+- Improved the accessibility experience of the accordion buttons so screen readers do not detect it twice.
+
+- Summary : aria-hidden={buttonIsInteractive ? 'true' : 'false'} was added to src/components/accordion/accordion_trigger/accordion_trigger.tsx in object EuiAccordionTrigger in const arrow.
\ No newline at end of file

From a3a34f95c869349d4a2ed5d050b1a864eae01917 Mon Sep 17 00:00:00 2001
From: Yerimar <yeritachan@gmail.com>
Date: Sun, 2 Feb 2025 19:25:56 -0400
Subject: [PATCH 6/7] Deleting 2.md file, editing 8236.md and re-adding
 snapshot test

---
 packages/eui/changelogs/upcoming/2.md         |   7 -
 packages/eui/changelogs/upcoming/8236.md      |   6 +-
 .../collapsible_nav.test.tsx.snap             | 418 ++++++++++++++++++
 3 files changed, 419 insertions(+), 12 deletions(-)
 delete mode 100644 packages/eui/changelogs/upcoming/2.md
 create mode 100644 packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap

diff --git a/packages/eui/changelogs/upcoming/2.md b/packages/eui/changelogs/upcoming/2.md
deleted file mode 100644
index 15629de13fc..00000000000
--- a/packages/eui/changelogs/upcoming/2.md
+++ /dev/null
@@ -1,7 +0,0 @@
-- Added aria-hidden={buttonIsInteractive ? 'true' : 'false'} tag to the accordion_trigger.tsx file, as advised in the issue description.
-
-**Accessibility**
-
-- Improved the accessibility experience of the accordion buttons so screen readers do not detect it twice.
-
-- Summary : aria-hidden={buttonIsInteractive ? 'true' : 'false'} was added to src/components/accordion/accordion_trigger/accordion_trigger.tsx in object EuiAccordionTrigger in const arrow.
\ No newline at end of file
diff --git a/packages/eui/changelogs/upcoming/8236.md b/packages/eui/changelogs/upcoming/8236.md
index 15629de13fc..d6067d0e524 100644
--- a/packages/eui/changelogs/upcoming/8236.md
+++ b/packages/eui/changelogs/upcoming/8236.md
@@ -1,7 +1,3 @@
-- Added aria-hidden={buttonIsInteractive ? 'true' : 'false'} tag to the accordion_trigger.tsx file, as advised in the issue description.
-
 **Accessibility**
 
-- Improved the accessibility experience of the accordion buttons so screen readers do not detect it twice.
-
-- Summary : aria-hidden={buttonIsInteractive ? 'true' : 'false'} was added to src/components/accordion/accordion_trigger/accordion_trigger.tsx in object EuiAccordionTrigger in const arrow.
\ No newline at end of file
+- Improved the `EuiAccordionTrigger`'s screen reader UX. Passed `aria-hidden` to the `EuiAccordionArrow` to avoid duplicated announcements by screen readers.
\ No newline at end of file
diff --git a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
new file mode 100644
index 00000000000..16ed32ffd1d
--- /dev/null
+++ b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -0,0 +1,418 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsibleNav close button can be hidden 1`] = `
+<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
+      data-focus-lock-disabled="false"
+    >
+      <nav
+        aria-describedby="generated-id"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
+        data-autofocus="true"
+        id="id"
+        role="dialog"
+        style="inline-size: 320px;"
+        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </nav>
+    </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>
+`;
+
+exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `<div />`;
+
+exports[`EuiCollapsibleNav is rendered 1`] = `
+<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
+      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-euiCollapsibleNav-overlay-euiTestCss"
+        data-autofocus="true"
+        data-test-subj="test subject string"
+        id="id"
+        role="dialog"
+        style="inline-size: 320px;"
+        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </nav>
+    </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>
+`;
+
+exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
+<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"
+  >
+    <nav
+      aria-describedby="generated-id"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
+      data-autofocus="true"
+      id="id"
+      role="dialog"
+      style="inline-size: 240px;"
+      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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+        data-test-subj="euiFlyoutCloseButton"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          color="inherit"
+          data-euiicon-type="cross"
+        />
+      </button>
+    </nav>
+  </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[`EuiCollapsibleNav props button 1`] = `
+<div>
+  <button
+    aria-controls="id"
+    aria-expanded="true"
+    aria-pressed="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"
+    >
+      <nav
+        aria-describedby="generated-id"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
+        data-autofocus="true"
+        id="id"
+        role="dialog"
+        style="inline-size: 320px;"
+        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </nav>
+    </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>
+`;
+
+exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
+<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
+      data-focus-lock-disabled="false"
+    >
+      <nav
+        aria-describedby="generated-id"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
+        data-autofocus="true"
+        id="id"
+        role="dialog"
+        style="inline-size: 320px;"
+        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </nav>
+    </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>
+`;
+
+exports[`EuiCollapsibleNav props isDocked 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+  <div
+    data-focus-lock-disabled="disabled"
+  >
+    <nav
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
+      id="id"
+      style="inline-size: 320px;"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+</div>
+`;
+
+exports[`EuiCollapsibleNav props onClose 1`] = `
+<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
+      data-focus-lock-disabled="false"
+    >
+      <nav
+        aria-describedby="generated-id"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
+        data-autofocus="true"
+        id="id"
+        role="dialog"
+        style="inline-size: 320px;"
+        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </nav>
+    </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>
+`;
+
+exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
+<div>
+  <button
+    aria-controls="id"
+    aria-expanded="true"
+    aria-pressed="true"
+  />
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+  <div
+    data-focus-lock-disabled="disabled"
+  >
+    <nav
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
+      id="id"
+      style="inline-size: 320px;"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+</div>
+`;
+
+exports[`EuiCollapsibleNav props size 1`] = `
+<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
+      data-focus-lock-disabled="false"
+    >
+      <nav
+        aria-describedby="generated-id"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
+        data-autofocus="true"
+        id="id"
+        role="dialog"
+        style="inline-size: 240px;"
+        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 euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+      </nav>
+    </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>
+`;

From a717d80247a1b757fc53cfbc54322ccf954394cb Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Tue, 25 Feb 2025 09:33:34 +0100
Subject: [PATCH 7/7] chore: update changelog

---
 packages/eui/changelogs/upcoming/8236.md | 3 ---
 packages/eui/changelogs/upcoming/8342.md | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 packages/eui/changelogs/upcoming/8236.md
 create mode 100644 packages/eui/changelogs/upcoming/8342.md

diff --git a/packages/eui/changelogs/upcoming/8236.md b/packages/eui/changelogs/upcoming/8236.md
deleted file mode 100644
index d6067d0e524..00000000000
--- a/packages/eui/changelogs/upcoming/8236.md
+++ /dev/null
@@ -1,3 +0,0 @@
-**Accessibility**
-
-- Improved the `EuiAccordionTrigger`'s screen reader UX. Passed `aria-hidden` to the `EuiAccordionArrow` to avoid duplicated announcements by screen readers.
\ No newline at end of file
diff --git a/packages/eui/changelogs/upcoming/8342.md b/packages/eui/changelogs/upcoming/8342.md
new file mode 100644
index 00000000000..18d44f63680
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8342.md
@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Improved the `EuiAccordionTrigger`'s screen reader UX by passed `aria-hidden` to the `EuiAccordionArrow` to avoid duplicated announcements by screen readers.
\ No newline at end of file