fix: Collapse expandIcon aria-label adds semantic attribute value (#49395)

* fix: Collapse expandIcon aria-label adds semantic attribute value

* test: update snap

* test: update test case

* test: update snap

components/collapse/Collapse.tsx

@@ -105,7 +105,10 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
         typeof mergedExpandIcon === 'function' ? (
           mergedExpandIcon(panelProps)
         ) : (
-          <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
+          <RightOutlined
+            rotate={panelProps.isActive ? 90 : undefined}
+            aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
+          />
         );
       return cloneElement(icon, () => ({
         className: classNames((icon as React.ReactElement)?.props?.className, `${prefixCls}-arrow`),

components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -19,7 +19,7 @@ exports[`renders components/collapse/demo/accordion.tsx extend context correctly
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -59,7 +59,7 @@ exports[`renders components/collapse/demo/accordion.tsx extend context correctly
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -99,7 +99,7 @@ exports[`renders components/collapse/demo/accordion.tsx extend context correctly
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -148,7 +148,7 @@ exports[`renders components/collapse/demo/basic.tsx extend context correctly 1`]
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -202,7 +202,7 @@ exports[`renders components/collapse/demo/basic.tsx extend context correctly 1`]
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -242,7 +242,7 @@ exports[`renders components/collapse/demo/basic.tsx extend context correctly 1`]
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -291,7 +291,7 @@ exports[`renders components/collapse/demo/borderless.tsx extend context correctl
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -345,7 +345,7 @@ exports[`renders components/collapse/demo/borderless.tsx extend context correctl
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -385,7 +385,7 @@ exports[`renders components/collapse/demo/borderless.tsx extend context correctl
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -438,7 +438,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
             class="ant-collapse-expand-icon"
           >
             <span
-              aria-label="right"
+              aria-label="expanded"
               class="anticon anticon-right ant-collapse-arrow"
               role="img"
             >
@@ -498,7 +498,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
             class="ant-collapse-expand-icon"
           >
             <span
-              aria-label="right"
+              aria-label="expanded"
               class="anticon anticon-right ant-collapse-arrow"
               role="img"
             >
@@ -560,7 +560,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
             class="ant-collapse-expand-icon"
           >
             <span
-              aria-label="right"
+              aria-label="collapsed"
               class="anticon anticon-right ant-collapse-arrow"
               role="img"
             >
@@ -611,7 +611,7 @@ exports[`renders components/collapse/demo/component-token.tsx extend context cor
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -651,7 +651,7 @@ exports[`renders components/collapse/demo/component-token.tsx extend context cor
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -691,7 +691,7 @@ exports[`renders components/collapse/demo/component-token.tsx extend context cor
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -888,7 +888,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="expanded"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -966,7 +966,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1030,7 +1030,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1249,7 +1249,7 @@ exports[`renders components/collapse/demo/ghost.tsx extend context correctly 1`]
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1303,7 +1303,7 @@ exports[`renders components/collapse/demo/ghost.tsx extend context correctly 1`]
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1343,7 +1343,7 @@ exports[`renders components/collapse/demo/ghost.tsx extend context correctly 1`]
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1392,7 +1392,7 @@ exports[`renders components/collapse/demo/mix.tsx extend context correctly 1`] =
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1432,7 +1432,7 @@ exports[`renders components/collapse/demo/mix.tsx extend context correctly 1`] =
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1472,7 +1472,7 @@ exports[`renders components/collapse/demo/mix.tsx extend context correctly 1`] =
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1521,7 +1521,7 @@ exports[`renders components/collapse/demo/noarrow.tsx extend context correctly 1
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1612,7 +1612,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1666,7 +1666,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1720,7 +1720,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >

components/collapse/__tests__/__snapshots__/demo.test.ts.snap

@@ -19,7 +19,7 @@ exports[`renders components/collapse/demo/accordion.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -59,7 +59,7 @@ exports[`renders components/collapse/demo/accordion.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -99,7 +99,7 @@ exports[`renders components/collapse/demo/accordion.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -146,7 +146,7 @@ exports[`renders components/collapse/demo/basic.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -200,7 +200,7 @@ exports[`renders components/collapse/demo/basic.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -240,7 +240,7 @@ exports[`renders components/collapse/demo/basic.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -287,7 +287,7 @@ exports[`renders components/collapse/demo/borderless.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -341,7 +341,7 @@ exports[`renders components/collapse/demo/borderless.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -381,7 +381,7 @@ exports[`renders components/collapse/demo/borderless.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -432,7 +432,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
             class="ant-collapse-expand-icon"
           >
             <span
-              aria-label="right"
+              aria-label="expanded"
               class="anticon anticon-right ant-collapse-arrow"
               role="img"
             >
@@ -492,7 +492,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
             class="ant-collapse-expand-icon"
           >
             <span
-              aria-label="right"
+              aria-label="expanded"
               class="anticon anticon-right ant-collapse-arrow"
               role="img"
             >
@@ -554,7 +554,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
             class="ant-collapse-expand-icon"
           >
             <span
-              aria-label="right"
+              aria-label="collapsed"
               class="anticon anticon-right ant-collapse-arrow"
               role="img"
             >
@@ -603,7 +603,7 @@ exports[`renders components/collapse/demo/component-token.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -643,7 +643,7 @@ exports[`renders components/collapse/demo/component-token.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -683,7 +683,7 @@ exports[`renders components/collapse/demo/component-token.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -876,7 +876,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="expanded"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -954,7 +954,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1018,7 +1018,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1154,7 +1154,7 @@ exports[`renders components/collapse/demo/ghost.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1208,7 +1208,7 @@ exports[`renders components/collapse/demo/ghost.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1248,7 +1248,7 @@ exports[`renders components/collapse/demo/ghost.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1295,7 +1295,7 @@ exports[`renders components/collapse/demo/mix.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1335,7 +1335,7 @@ exports[`renders components/collapse/demo/mix.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1375,7 +1375,7 @@ exports[`renders components/collapse/demo/mix.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1422,7 +1422,7 @@ exports[`renders components/collapse/demo/noarrow.tsx correctly 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -1511,7 +1511,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1565,7 +1565,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >
@@ -1619,7 +1619,7 @@ Array [
           class="ant-collapse-expand-icon"
         >
           <span
-            aria-label="right"
+            aria-label="collapsed"
             class="anticon anticon-right ant-collapse-arrow"
             role="img"
           >

components/collapse/__tests__/__snapshots__/index.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Collapse Collapse.Panel usage 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -58,7 +58,7 @@ exports[`Collapse Collapse.Panel usage 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -105,7 +105,7 @@ exports[`Collapse could override default openMotion 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="expanded"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -162,7 +162,7 @@ exports[`Collapse should render extra node of panel 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -211,7 +211,7 @@ exports[`Collapse should render extra node of panel 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >

components/collapse/__tests__/index.test.tsx

@@ -251,4 +251,28 @@ describe('Collapse', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('Check expandIcon aria-label value', () => {
+    const { container, rerender } = render(
+      <Collapse activeKey="1">
+        <Collapse.Panel header="header" key="1" />
+      </Collapse>,
+    );
+
+    expect(container.querySelector('.ant-collapse-arrow')).toHaveAttribute(
+      'aria-label',
+      'expanded',
+    );
+
+    rerender(
+      <Collapse>
+        <Collapse.Panel header="header" key="1" />
+      </Collapse>,
+    );
+
+    expect(container.querySelector('.ant-collapse-arrow')).toHaveAttribute(
+      'aria-label',
+      'collapsed',
+    );
+  });
 });

components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -4366,7 +4366,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                                 class="ant-collapse-expand-icon"
                               >
                                 <span
-                                  aria-label="right"
+                                  aria-label="expanded"
                                   class="anticon anticon-right ant-collapse-arrow"
                                   role="img"
                                 >
@@ -4503,7 +4503,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                                 class="ant-collapse-expand-icon"
                               >
                                 <span
-                                  aria-label="right"
+                                  aria-label="expanded"
                                   class="anticon anticon-right ant-collapse-arrow"
                                   role="img"
                                 >
@@ -4640,7 +4640,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                                 class="ant-collapse-expand-icon"
                               >
                                 <span
-                                  aria-label="right"
+                                  aria-label="expanded"
                                   class="anticon anticon-right ant-collapse-arrow"
                                   role="img"
                                 >
@@ -4777,7 +4777,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                                 class="ant-collapse-expand-icon"
                               >
                                 <span
-                                  aria-label="right"
+                                  aria-label="expanded"
                                   class="anticon anticon-right ant-collapse-arrow"
                                   role="img"
                                 >
@@ -5665,7 +5665,7 @@ Array [
                         class="ant-collapse-expand-icon"
                       >
                         <span
-                          aria-label="right"
+                          aria-label="expanded"
                           class="anticon anticon-right ant-collapse-arrow"
                           role="img"
                         >
@@ -5802,7 +5802,7 @@ Array [
                         class="ant-collapse-expand-icon"
                       >
                         <span
-                          aria-label="right"
+                          aria-label="expanded"
                           class="anticon anticon-right ant-collapse-arrow"
                           role="img"
                         >
@@ -5939,7 +5939,7 @@ Array [
                         class="ant-collapse-expand-icon"
                       >
                         <span
-                          aria-label="right"
+                          aria-label="expanded"
                           class="anticon anticon-right ant-collapse-arrow"
                           role="img"
                         >

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -12232,7 +12232,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
         class="config-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right config-collapse-arrow"
           role="img"
         >
@@ -12279,7 +12279,7 @@ exports[`ConfigProvider components Collapse configProvider componentDisabled 1`]
         class="config-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right config-collapse-arrow"
           role="img"
         >
@@ -12326,7 +12326,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
         class="config-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right config-collapse-arrow"
           role="img"
         >
@@ -12373,7 +12373,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
         class="config-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right config-collapse-arrow"
           role="img"
         >
@@ -12420,7 +12420,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize small 1
         class="config-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right config-collapse-arrow"
           role="img"
         >
@@ -12467,7 +12467,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `
         class="ant-collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right ant-collapse-arrow"
           role="img"
         >
@@ -12514,7 +12514,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
         class="prefix-Collapse-expand-icon"
       >
         <span
-          aria-label="right"
+          aria-label="collapsed"
           class="anticon anticon-right prefix-Collapse-arrow"
           role="img"
         >