[EuiAccordion] Fixed a bug in aria-expanded for axe-core. (#6694)

* Fixed a bug in `EuiAccordion` aria-expanded for axe. * Added logic check for EuiAccordion aria-expanded attr. * Adding comment for new logic reasoning. * Revising logic to only omit aria-expanded if second element is not a button. * Adding a changelog entry. * Update upcoming_changelogs/6694.md Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update upcoming_changelogs/6694.md Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Update src/components/accordion/accordion.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * Refactoring logic inline for better readability. --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
elastic · Apr 6, 2023 · 35b6a27 · 35b6a27
1 parent d6c8e10
commit 35b6a27
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -587,7 +587,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"
     >
@@ -688,7 +687,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"
     >

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
@@ -374,7 +374,8 @@ export class EuiAccordionClass extends Component<
         id={buttonId}
         className={buttonClasses}
         aria-controls={id}
-        aria-expanded={isOpen}
+        // `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}

diff --git a/upcoming_changelogs/6694.md b/upcoming_changelogs/6694.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiAccordion` to not set an `aria-expanded` attribute on non-interactive `buttonElement`s