From 9f811fe00edf9af79814954ff08bf5366bb898ab Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Wed, 5 Apr 2023 11:56:17 -0500
Subject: [PATCH 1/7] Fixed a bug in `EuiAccordion` aria-expanded for axe.

* Added logic check for EuiAccordion aria-expanded attr.
* Adding comment for new logic reasoning.
---
 .../__snapshots__/accordion.test.tsx.snap        | 16 ----------------
 src/components/accordion/accordion.tsx           |  7 ++++++-
 .../collapsible_nav_group.test.tsx.snap          |  2 --
 .../notification_event.test.tsx.snap             |  1 -
 4 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 6828e9415a6..e716e127cf3 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     </button>
     <button
       aria-controls="20"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -79,7 +78,6 @@ exports[`EuiAccordion behavior does not open when isDisabled 1`] = `
     </button>
     <button
       aria-controls="18"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button-disabled"
       disabled=""
       id="generated-id"
@@ -244,7 +242,6 @@ exports[`EuiAccordion is rendered 1`] = `
     </button>
     <button
       aria-controls="0"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -295,7 +292,6 @@ exports[`EuiAccordion isDisabled is rendered 1`] = `
     </button>
     <button
       aria-controls="16"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button-disabled"
       disabled=""
       id="generated-id"
@@ -331,7 +327,6 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
   >
     <button
       aria-controls="9"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -366,7 +361,6 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
   >
     <button
       aria-controls="8"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -433,7 +427,6 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
     </button>
     <button
       aria-controls="10"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -483,7 +476,6 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
     </button>
     <button
       aria-controls="3"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -537,7 +529,6 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
     </button>
     <button
       aria-controls="2"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -587,7 +578,6 @@ exports[`EuiAccordion props buttonElement is rendered 1`] = `
     </button>
     <div
       aria-controls="5"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
     >
@@ -636,7 +626,6 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
     </button>
     <button
       aria-controls="4"
-      aria-expanded="false"
       aria-label="aria-label"
       class="euiAccordion__button testClass1 testClass2 emotion-euiAccordion__button"
       data-test-subj="test subject string"
@@ -688,7 +677,6 @@ exports[`EuiAccordion props element is rendered 1`] = `
     </button>
     <legend
       aria-controls="1"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
     >
@@ -737,7 +725,6 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
     </button>
     <button
       aria-controls="6"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -794,7 +781,6 @@ exports[`EuiAccordion props forceState closed is rendered 1`] = `
     </button>
     <button
       aria-controls="11"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -956,7 +942,6 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
     </button>
     <button
       aria-controls="14"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -1015,7 +1000,6 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
     </button>
     <button
       aria-controls="15"
-      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 52a5dc46dc6..f509c466b54 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -367,6 +367,11 @@ export class EuiAccordionClass extends Component<
       childrenContent = children;
     }
 
+    // We want to omit the aria-expanded attribute when the second
+    // button includes interactive content or is changed to a DIV.
+    // Otherwise axe-core throws a critical violation.
+    const isExpandableButton = ButtonElement === 'button' && isOpen;
+
     const button = (
       <ButtonElement
         css={cssButtonStyles}
@@ -374,7 +379,7 @@ export class EuiAccordionClass extends Component<
         id={buttonId}
         className={buttonClasses}
         aria-controls={id}
-        aria-expanded={isOpen}
+        aria-expanded={isExpandableButton ? 'true' : undefined}
         onClick={isDisabled ? undefined : this.onToggle}
         type={ButtonElement === 'button' ? 'button' : undefined}
         disabled={ButtonElement === 'button' ? isDisabled : undefined}
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index e489a2eb575..ecb288b124c 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -207,7 +207,6 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
   >
     <button
       aria-controls="id"
-      aria-expanded="false"
       aria-label="aria-label"
       class="euiAccordion__button euiCollapsibleNavGroup__heading testClass1 testClass2 emotion-euiAccordion__button"
       data-test-subj="test subject string"
@@ -274,7 +273,6 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
   >
     <button
       aria-controls="id"
-      aria-expanded="false"
       class="euiAccordion__button euiCollapsibleNavGroup__heading emotion-euiAccordion__button"
       id="generated-id"
       type="button"
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 1d9f8807840..23c309546e7 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -507,7 +507,6 @@ exports[`EuiNotificationEvent props multiple messages are rendered 1`] = `
         >
           <button
             aria-controls="euiNotificationEventMessagesAccordion_generated-id"
-            aria-expanded="false"
             aria-label="+ 2 messages for title"
             class="euiAccordion__button euiNotificationEventMessages__accordionButton emotion-euiAccordion__button"
             id="generated-id"

From 0b9e3709eabb3bbe7e98cd534846e019778f8bf7 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Wed, 5 Apr 2023 12:32:36 -0500
Subject: [PATCH 2/7] Revising logic to only omit aria-expanded if second
 element is not a button.

---
 .../__snapshots__/accordion.test.tsx.snap          | 14 ++++++++++++++
 src/components/accordion/accordion.tsx             |  7 +++----
 .../collapsible_nav_group.test.tsx.snap            |  2 ++
 .../__snapshots__/notification_event.test.tsx.snap |  1 +
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index e716e127cf3..81af15442e3 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     </button>
     <button
       aria-controls="20"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -78,6 +79,7 @@ exports[`EuiAccordion behavior does not open when isDisabled 1`] = `
     </button>
     <button
       aria-controls="18"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button-disabled"
       disabled=""
       id="generated-id"
@@ -242,6 +244,7 @@ exports[`EuiAccordion is rendered 1`] = `
     </button>
     <button
       aria-controls="0"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -292,6 +295,7 @@ exports[`EuiAccordion isDisabled is rendered 1`] = `
     </button>
     <button
       aria-controls="16"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button-disabled"
       disabled=""
       id="generated-id"
@@ -327,6 +331,7 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
   >
     <button
       aria-controls="9"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -361,6 +366,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
   >
     <button
       aria-controls="8"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -427,6 +433,7 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
     </button>
     <button
       aria-controls="10"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -476,6 +483,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
     </button>
     <button
       aria-controls="3"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -529,6 +537,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
     </button>
     <button
       aria-controls="2"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -626,6 +635,7 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
     </button>
     <button
       aria-controls="4"
+      aria-expanded="false"
       aria-label="aria-label"
       class="euiAccordion__button testClass1 testClass2 emotion-euiAccordion__button"
       data-test-subj="test subject string"
@@ -725,6 +735,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
     </button>
     <button
       aria-controls="6"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -781,6 +792,7 @@ exports[`EuiAccordion props forceState closed is rendered 1`] = `
     </button>
     <button
       aria-controls="11"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -942,6 +954,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
     </button>
     <button
       aria-controls="14"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
@@ -1000,6 +1013,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
     </button>
     <button
       aria-controls="15"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
       type="button"
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index f509c466b54..763ccb14a2c 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -368,9 +368,8 @@ export class EuiAccordionClass extends Component<
     }
 
     // We want to omit the aria-expanded attribute when the second
-    // button includes interactive content or is changed to a DIV.
-    // Otherwise axe-core throws a critical violation.
-    const isExpandableButton = ButtonElement === 'button' && isOpen;
+    // element is not a button. Otherwise axe-core throws a violation.
+    const isExpandableButton = ButtonElement === 'button';
 
     const button = (
       <ButtonElement
@@ -379,7 +378,7 @@ export class EuiAccordionClass extends Component<
         id={buttonId}
         className={buttonClasses}
         aria-controls={id}
-        aria-expanded={isExpandableButton ? 'true' : undefined}
+        aria-expanded={isExpandableButton ? isOpen : undefined}
         onClick={isDisabled ? undefined : this.onToggle}
         type={ButtonElement === 'button' ? 'button' : undefined}
         disabled={ButtonElement === 'button' ? isDisabled : undefined}
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index ecb288b124c..e489a2eb575 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -207,6 +207,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
   >
     <button
       aria-controls="id"
+      aria-expanded="false"
       aria-label="aria-label"
       class="euiAccordion__button euiCollapsibleNavGroup__heading testClass1 testClass2 emotion-euiAccordion__button"
       data-test-subj="test subject string"
@@ -273,6 +274,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
   >
     <button
       aria-controls="id"
+      aria-expanded="false"
       class="euiAccordion__button euiCollapsibleNavGroup__heading emotion-euiAccordion__button"
       id="generated-id"
       type="button"
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 23c309546e7..1d9f8807840 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -507,6 +507,7 @@ exports[`EuiNotificationEvent props multiple messages are rendered 1`] = `
         >
           <button
             aria-controls="euiNotificationEventMessagesAccordion_generated-id"
+            aria-expanded="false"
             aria-label="+ 2 messages for title"
             class="euiAccordion__button euiNotificationEventMessages__accordionButton emotion-euiAccordion__button"
             id="generated-id"

From 15d77ff9fae12973541ac0e3d3f1e4c37bd31385 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 6 Apr 2023 14:53:50 -0500
Subject: [PATCH 3/7] Adding a changelog entry.

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

diff --git a/upcoming_changelogs/6694.md b/upcoming_changelogs/6694.md
new file mode 100644
index 00000000000..7f0fc8e043f
--- /dev/null
+++ b/upcoming_changelogs/6694.md
@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed `EuiAccordion` to use `aria-expanded` attribute correctly [(#6694)](https://github.com/elastic/eui/pull/6694)
+
+**Breaking changes**
+
+- Some `EuiAccordion` snapshots have `aria-expanded` attribute removed [(#6694)](https://github.com/elastic/eui/pull/6694)

From 2f758e09cff0d9c8bd1743902b6a9a94b2c2399c Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Thu, 6 Apr 2023 15:12:13 -0500
Subject: [PATCH 4/7] Update upcoming_changelogs/6694.md

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 upcoming_changelogs/6694.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upcoming_changelogs/6694.md b/upcoming_changelogs/6694.md
index 7f0fc8e043f..591a0c2f25a 100644
--- a/upcoming_changelogs/6694.md
+++ b/upcoming_changelogs/6694.md
@@ -1,6 +1,6 @@
 **Bug fixes**
 
-- Fixed `EuiAccordion` to use `aria-expanded` attribute correctly [(#6694)](https://github.com/elastic/eui/pull/6694)
+- Fixed `EuiAccordion` to not set an `aria-expanded` attribute on non-interactive `buttonElement`s
 
 **Breaking changes**
 

From 702ee99453dd492e39a92dfdb9ef167bc97473fc Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Thu, 6 Apr 2023 15:12:24 -0500
Subject: [PATCH 5/7] Update upcoming_changelogs/6694.md

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 upcoming_changelogs/6694.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/upcoming_changelogs/6694.md b/upcoming_changelogs/6694.md
index 591a0c2f25a..171f11b87fe 100644
--- a/upcoming_changelogs/6694.md
+++ b/upcoming_changelogs/6694.md
@@ -1,7 +1,3 @@
 **Bug fixes**
 
 - Fixed `EuiAccordion` to not set an `aria-expanded` attribute on non-interactive `buttonElement`s
-
-**Breaking changes**
-
-- Some `EuiAccordion` snapshots have `aria-expanded` attribute removed [(#6694)](https://github.com/elastic/eui/pull/6694)

From 475cd8cabd0a0970b438f4711277074d926fc557 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Thu, 6 Apr 2023 15:13:07 -0500
Subject: [PATCH 6/7] Update src/components/accordion/accordion.tsx

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 src/components/accordion/accordion.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 763ccb14a2c..3267d7cf67d 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -378,7 +378,8 @@ export class EuiAccordionClass extends Component<
         id={buttonId}
         className={buttonClasses}
         aria-controls={id}
-        aria-expanded={isExpandableButton ? isOpen : undefined}
+        // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
+        aria-expanded={ButtonElement === 'button' ? isOpen : undefined}
         onClick={isDisabled ? undefined : this.onToggle}
         type={ButtonElement === 'button' ? 'button' : undefined}
         disabled={ButtonElement === 'button' ? isDisabled : undefined}

From 934fea8bf3d69736c45205bfcf80da651ecac615 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 6 Apr 2023 15:14:14 -0500
Subject: [PATCH 7/7] Refactoring logic inline for better readability.

---
 src/components/accordion/accordion.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 3267d7cf67d..a6e1acc5571 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -367,10 +367,6 @@ export class EuiAccordionClass extends Component<
       childrenContent = children;
     }
 
-    // We want to omit the aria-expanded attribute when the second
-    // element is not a button. Otherwise axe-core throws a violation.
-    const isExpandableButton = ButtonElement === 'button';
-
     const button = (
       <ButtonElement
         css={cssButtonStyles}