From fd3f9114287aab9b5b1ed1b6b6d9d11c6f0328e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?=
 <73953029+nrps9909@users.noreply.github.com>
Date: Thu, 27 Aug 2026 16:27:30 +0800
Subject: [PATCH] fix: make row expand controls accessible

---
 src/utils/expandUtil.tsx                    | 10 ++-
 tests/ExpandRow.spec.jsx                    | 17 +++++
 tests/Table.spec.jsx                        |  2 +-
 tests/__snapshots__/ExpandRow.spec.jsx.snap | 70 ++++++++++++++++-----
 4 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/src/utils/expandUtil.tsx b/src/utils/expandUtil.tsx
index 43fbe26a1..028050580 100644
--- a/src/utils/expandUtil.tsx
+++ b/src/utils/expandUtil.tsx
@@ -39,7 +39,15 @@ export function DefaultExpandIcon<RecordType>({
     );
   }
 
-  return <span className={className} onClick={onClick} />;
+  return (
+    <button
+      type="button"
+      aria-expanded={expanded}
+      aria-label={expanded ? 'Collapse row' : 'Expand row'}
+      className={className}
+      onClick={onClick}
+    />
+  );
 }
 
 export function renderExpandIcon<RecordType>({
diff --git a/tests/ExpandRow.spec.jsx b/tests/ExpandRow.spec.jsx
index 50430c325..1546e5812 100644
--- a/tests/ExpandRow.spec.jsx
+++ b/tests/ExpandRow.spec.jsx
@@ -29,6 +29,23 @@ describe('Table.Expand', () => {
     errorSpy.mockRestore();
   });
 
+  it('renders keyboard-accessible row expand controls', () => {
+    const { getAllByRole } = render(
+      createTable({
+        expandable: { expandedRowRender },
+      }),
+    );
+
+    const [expandButton] = getAllByRole('button', { name: 'Expand row' });
+    expect(expandButton).toHaveAttribute('type', 'button');
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(expandButton);
+
+    expect(expandButton).toHaveAccessibleName('Collapse row');
+    expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+  });
+
   it('pass proper parameters to expandedRowRender', () => {
     const rowRender = vi.fn(() => <div>expanded row</div>);
     const expandableProps = props => ({ expandable: { expandedRowRender: rowRender, ...props } });
diff --git a/tests/Table.spec.jsx b/tests/Table.spec.jsx
index a4d1a74c1..77b796ff5 100644
--- a/tests/Table.spec.jsx
+++ b/tests/Table.spec.jsx
@@ -1021,7 +1021,7 @@ describe('Table.Basic', () => {
         />,
       );
 
-      const getExpandIcons = () => container.querySelectorAll('span.rc-table-row-expand-icon');
+      const getExpandIcons = () => container.querySelectorAll('.rc-table-row-expand-icon');
 
       fireEvent.click(getExpandIcons()[0]);
       expect(getExpandIcons()[0].classList.contains('rc-table-row-expanded')).toBeTruthy();
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap
index e589629f2..14a68f34a 100644
--- a/tests/__snapshots__/ExpandRow.spec.jsx.snap
+++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap
@@ -44,8 +44,11 @@ exports[`Table.Expand > childrenColumnName 1`] = `
               <span
                 class="rc-table-row-indent indent-level-0"
               />
-              <span
+              <button
+                aria-expanded="true"
+                aria-label="Collapse row"
                 class="rc-table-row-expand-icon rc-table-row-expanded"
+                type="button"
               />
               Lucy
             </td>
@@ -204,8 +207,11 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
             <td
@@ -232,8 +238,11 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
             <td
@@ -359,8 +368,11 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
             <td
@@ -387,8 +399,11 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
             <td
@@ -602,8 +617,11 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="true"
+                aria-label="Collapse row"
                 class="rc-table-row-expand-icon rc-table-row-expanded"
+                type="button"
               />
             </td>
             <td
@@ -649,8 +667,11 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="true"
+                aria-label="Collapse row"
                 class="rc-table-row-expand-icon rc-table-row-expanded"
+                type="button"
               />
             </td>
             <td
@@ -739,8 +760,11 @@ exports[`Table.Expand > renders tree row correctly 1`] = `
               <span
                 class="rc-table-row-indent indent-level-0"
               />
-              <span
+              <button
+                aria-expanded="true"
+                aria-label="Collapse row"
                 class="rc-table-row-expand-icon rc-table-row-expanded"
+                type="button"
               />
               Lucy
             </td>
@@ -843,8 +867,11 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
               <span
                 class="rc-table-row-indent indent-level-0"
               />
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
               Lucy
             </td>
@@ -906,8 +933,11 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
               <span
                 class="rc-table-row-indent indent-level-0"
               />
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
               Jack
             </td>
@@ -1066,8 +1096,11 @@ exports[`Table.Expand > work in expandable fix 1`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
             <td
@@ -1094,8 +1127,11 @@ exports[`Table.Expand > work in expandable fix 1`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
             <td
@@ -1239,8 +1275,11 @@ exports[`Table.Expand > work in expandable fix 2`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 5; --z-offset-reverse: 7;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
           </tr>
@@ -1267,8 +1306,11 @@ exports[`Table.Expand > work in expandable fix 2`] = `
               class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
               style="inset-inline-start: 0px; --z-offset: 5; --z-offset-reverse: 7;"
             >
-              <span
+              <button
+                aria-expanded="false"
+                aria-label="Expand row"
                 class="rc-table-row-expand-icon rc-table-row-collapsed"
+                type="button"
               />
             </td>
           </tr>