From 16876345650eb62a7d2e1107e6d6a24fc0654dce Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 28 Oct 2024 17:41:28 +0800
Subject: [PATCH] fix: Collapse a11y issue and cursor style (#51400)

---
 .../__snapshots__/demo-extend.test.ts.snap    | 22 +++++++++++++------
 .../__tests__/__snapshots__/demo.test.ts.snap | 22 +++++++++++++------
 components/collapse/style/index.ts            | 10 ++++++++-
 package.json                                  |  2 +-
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
index fffb48db58..703a74c3eb 100644
--- a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -430,12 +430,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
         class="ant-collapse-item ant-collapse-item-active"
       >
         <div
-          aria-disabled="false"
-          aria-expanded="true"
-          class="ant-collapse-header ant-collapse-header-collapsible-only"
+          class="ant-collapse-header ant-collapse-collapsible-header"
         >
           <div
+            aria-disabled="false"
+            aria-expanded="true"
             class="ant-collapse-expand-icon"
+            role="button"
+            tabindex="0"
           >
             <span
               aria-label="expanded"
@@ -459,7 +461,11 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
             </span>
           </div>
           <span
+            aria-disabled="false"
+            aria-expanded="true"
             class="ant-collapse-header-text"
+            role="button"
+            tabindex="0"
           >
             This panel can only be collapsed by clicking text
           </span>
@@ -490,12 +496,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
         class="ant-collapse-item ant-collapse-item-active"
       >
         <div
-          aria-disabled="false"
-          aria-expanded="true"
-          class="ant-collapse-header ant-collapse-icon-collapsible-only"
+          class="ant-collapse-header ant-collapse-collapsible-icon"
         >
           <div
+            aria-disabled="false"
+            aria-expanded="true"
             class="ant-collapse-expand-icon"
+            role="button"
+            tabindex="0"
           >
             <span
               aria-label="expanded"
@@ -552,7 +560,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
         <div
           aria-disabled="true"
           aria-expanded="false"
-          class="ant-collapse-header"
+          class="ant-collapse-header ant-collapse-collapsible-disabled"
           role="button"
           tabindex="-1"
         >
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
index 4cdf7b340a..c20dfb4712 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
@@ -424,12 +424,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
         class="ant-collapse-item ant-collapse-item-active"
       >
         <div
-          aria-disabled="false"
-          aria-expanded="true"
-          class="ant-collapse-header ant-collapse-header-collapsible-only"
+          class="ant-collapse-header ant-collapse-collapsible-header"
         >
           <div
+            aria-disabled="false"
+            aria-expanded="true"
             class="ant-collapse-expand-icon"
+            role="button"
+            tabindex="0"
           >
             <span
               aria-label="expanded"
@@ -453,7 +455,11 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
             </span>
           </div>
           <span
+            aria-disabled="false"
+            aria-expanded="true"
             class="ant-collapse-header-text"
+            role="button"
+            tabindex="0"
           >
             This panel can only be collapsed by clicking text
           </span>
@@ -484,12 +490,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
         class="ant-collapse-item ant-collapse-item-active"
       >
         <div
-          aria-disabled="false"
-          aria-expanded="true"
-          class="ant-collapse-header ant-collapse-icon-collapsible-only"
+          class="ant-collapse-header ant-collapse-collapsible-icon"
         >
           <div
+            aria-disabled="false"
+            aria-expanded="true"
             class="ant-collapse-expand-icon"
+            role="button"
+            tabindex="0"
           >
             <span
               aria-label="expanded"
@@ -546,7 +554,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
         <div
           aria-disabled="true"
           aria-expanded="false"
-          class="ant-collapse-header"
+          class="ant-collapse-header ant-collapse-collapsible-disabled"
           role="button"
           tabindex="-1"
         >
diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts
index 050a48432e..521752fbc1 100644
--- a/components/collapse/style/index.ts
+++ b/components/collapse/style/index.ts
@@ -149,7 +149,15 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
           },
         },
 
-        [`${componentCls}-icon-collapsible-only`]: {
+        [`${componentCls}-collapsible-header`]: {
+          cursor: 'default',
+          [`${componentCls}-header-text`]: {
+            flex: 'none',
+            cursor: 'pointer',
+          },
+        },
+
+        [`${componentCls}-collapsible-icon`]: {
           cursor: 'unset',
 
           [`${componentCls}-expand-icon`]: {
diff --git a/package.json b/package.json
index 27abe8ffa7..15f93f0359 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,7 @@
     "dayjs": "^1.11.11",
     "rc-cascader": "~3.29.0",
     "rc-checkbox": "~3.3.0",
-    "rc-collapse": "~3.8.0",
+    "rc-collapse": "~3.9.0",
     "rc-dialog": "~9.6.0",
     "rc-drawer": "~7.2.0",
     "rc-dropdown": "~4.2.0",