From 2c9e6b407bacf661ad99fa7d0f9e131c22b65dd8 Mon Sep 17 00:00:00 2001
From: Hernan Pintos <hernan.pintos@adevinta.com>
Date: Thu, 15 May 2025 17:54:40 +0200
Subject: [PATCH 1/2] feat(components/molecule/accordion): Remove aria-expanded
 from ItemPanel

---
 .../molecule/accordion/src/AccordionItemPanel.js   |  7 +++++--
 .../molecule/accordion/src/styles/index.scss       | 14 ++++----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/molecule/accordion/src/AccordionItemPanel.js b/components/molecule/accordion/src/AccordionItemPanel.js
index 2587c48af7..f52f5d598b 100644
--- a/components/molecule/accordion/src/AccordionItemPanel.js
+++ b/components/molecule/accordion/src/AccordionItemPanel.js
@@ -38,12 +38,15 @@ const AccordionItemPanel = forwardRef(
     } = useAccordionContext({isExpanded, value})
     const maxHeight = maxHeightProp !== undefined ? maxHeightProp : maxHeightContext
     const animationDuration = animationDurationProp || animationDurationContext
+
+    const className = cx(BASE_CLASS_ITEM_PANEL, BASE_CLASS_ELEMENT, {
+      [`${BASE_CLASS_ITEM_PANEL}--expanded`]: values.includes(value)
+    })
     return (
       <div
         id={id}
         ref={forwardedRef}
-        className={cx(BASE_CLASS_ITEM_PANEL, BASE_CLASS_ELEMENT)}
-        aria-expanded={values.includes(value)}
+        className={className}
         aria-disabled={disabled}
         style={{
           overflowY: height > maxHeight && maxHeight !== 0 ? 'scroll' : 'hidden',
diff --git a/components/molecule/accordion/src/styles/index.scss b/components/molecule/accordion/src/styles/index.scss
index 8206cb9ccf..7278525f19 100644
--- a/components/molecule/accordion/src/styles/index.scss
+++ b/components/molecule/accordion/src/styles/index.scss
@@ -51,10 +51,10 @@ $base-class-item-panel: '#{$base-class-item}Panel';
   #{$base-class-item-panel} {
     border-width: 0;
   }
-  #{$base-class-item-panel}[aria-expanded='false'] {
+  #{$base-class-item-panel} {
     border-top-width: 0;
   }
-  #{$base-class-item-panel}[aria-expanded='true'] {
+  #{$base-class-item-panel}--expanded {
     border-top-width: $bdw-accordion-item;
   }
 }
@@ -173,15 +173,9 @@ $base-class-item-panel: '#{$base-class-item}Panel';
 
 #{$base-class-item-panel} {
   overflow: hidden;
+  max-height: 0;
+  border-bottom: 0;
 
-  &[aria-expanded='false'] {
-    max-height: 0;
-    opacity: 0;
-    border-bottom: 0;
-  }
-  &[aria-collapsed='true'] {
-    opacity: 1;
-  }
   #{$base-class-item-panel}Content {
     background-color: $bgc-accordion-item-panel;
     padding: $p-accordion-item-panel;

From cf7aa6fdf7bc104cfeda9765ac4ea0a99fbfeb36 Mon Sep 17 00:00:00 2001
From: Hernan Pintos <hernan.pintos@adevinta.com>
Date: Thu, 15 May 2025 17:54:58 +0200
Subject: [PATCH 2/2] test(components/molecule/accordion): Update tests to
 check className instead of aria attributes

---
 components/molecule/accordion/test/index.test.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/molecule/accordion/test/index.test.js b/components/molecule/accordion/test/index.test.js
index ea7e1a422c..ec974d6efb 100644
--- a/components/molecule/accordion/test/index.test.js
+++ b/components/molecule/accordion/test/index.test.js
@@ -257,11 +257,12 @@ describe(json.name, () => {
       const panels = getAllByTestId(DATA_TEST_ID)
 
       // Then
+      const classNameExpanded = 'sui-MoleculeAccordionItemPanel--expanded'
       panels.forEach(panel => {
         if (['content 1', 'content 2'].includes(panel.innerText)) {
-          expect(Boolean(panel.hasAttribute('aria-expanded'))).to.be.true
+          expect(panel.classList.contains(classNameExpanded)).to.be.true
         } else if (['content 3'].includes(panel.innerText)) {
-          expect(Boolean(panel.hasAttribute('aria-collapsed'))).to.be.false
+          expect(panel.classList.contains(classNameExpanded)).to.be.false
         }
         expect(['content 1', 'content 2', 'content 3'].some(text => panel.innerText === text)).to.be.true
       })