Revert "fix(table): aria-label should be use the first text content in element when column title is ReactElement in table" (#38383)

* Revert "fix(table): aria-label should be use the first text content in element when column title is ReactElement in table (#38160)"

This reverts commit 21c4bcf40a.

* test: Update snapshot

components/table/__tests__/Table.sorter.test.tsx

@@ -108,32 +108,6 @@ describe('Table.sorter', () => {
     expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable');
   });
 
-  it('aria-label should be use the first text content in element when title is ReactElement', () => {
-    const { container } = render(
-      createTable(
-        {
-          sortDirections: ['descend', 'ascend'],
-        },
-        {
-          title: (
-            <span>
-              <em>Name</em>
-              <b>kiner</b>
-            </span>
-          ),
-          defaultSortOrder: 'descend',
-        },
-      ),
-    );
-
-    const getNameColumn = () => container.querySelector('th');
-    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
-    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
-    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
-    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
-    expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable');
-  });
-
   it('sort records', () => {
     const { container } = render(createTable());
     const getNameColumn = () => container.querySelector('th');

components/table/__tests__/Table.test.tsx

@@ -286,4 +286,24 @@ describe('Table', () => {
     render(<Wrapper />);
     expect(warnSpy).not.toHaveBeenCalled();
   });
+
+  it('title should support ReactNode', () => {
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: (
+              <div>
+                <strong>Current</strong> <span>User</span>
+              </div>
+            ),
+            dataIndex: 'name',
+          },
+        ]}
+        dataSource={[]}
+      />,
+    );
+
+    expect(container.querySelector('thead th')).toMatchSnapshot();
+  });
 });

components/table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -204,3 +204,18 @@ exports[`Table rtl render component should be rendered correctly in RTL directio
   </div>
 </div>
 `;
+
+exports[`Table title should support ReactNode 1`] = `
+<th
+  class="ant-table-cell"
+>
+  <div>
+    <strong>
+      Current
+    </strong>
+    <span>
+      User
+    </span>
+  </div>
+</th>
+`;

components/table/util.ts

@@ -1,5 +1,4 @@
 /* eslint-disable import/prefer-default-export */
-import React from 'react';
 import type { ColumnTitle, ColumnTitleProps, ColumnType, Key } from './interface';
 
 export function getColumnKey<RecordType>(column: ColumnType<RecordType>, defaultKey: string): Key {
@@ -17,22 +16,6 @@ export function getColumnPos(index: number, pos?: string) {
   return pos ? `${pos}-${index}` : `${index}`;
 }
 
-/**
- * Get first text content in Element
- *
- * @param node
- * @returns
- */
-function getElementFirstTextContent(node: React.ReactElement): string {
-  if (!node || !node.props || !node.props.children) return '';
-  if (typeof node.props.children === 'string') return node.props.children;
-  return (
-    node.props.children?.map?.((item: React.ReactElement) =>
-      getElementFirstTextContent(item),
-    )?.[0] || ''
-  );
-}
-
 export function renderColumnTitle<RecordType>(
   title: ColumnTitle<RecordType>,
   props: ColumnTitleProps<RecordType>,
@@ -40,12 +23,6 @@ export function renderColumnTitle<RecordType>(
   if (typeof title === 'function') {
     return title(props);
   }
-  // fix: #38155
-  if (React.isValidElement(title)) {
-    // if title is a React Element, we should get first text content as result,
-    // if there has not text content in React Element, return origin title
-    return getElementFirstTextContent(title) || title;
-  }
 
   return title;
 }

scripts/post-script.js

@@ -17,6 +17,7 @@ const DEPRECIATED_VERSION = {
     'https://github.com/ant-design/ant-design/issues/37929',
     'https://github.com/ant-design/ant-design/issues/37931',
   ],
+  '4.24.0': ['https://github.com/ant-design/ant-design/issues/38371'],
 };
 
 function matchDeprecated(version) {