fix(table): reset aria-label in table column (#39738)

* feat: reset aria-label in table column * feat: reset aria-label in table column
ant-design · Dec 22, 2022 · b91bab0 · b91bab0
1 parent 0e98cb5
commit b91bab0
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 47 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -26610,7 +26610,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="config-table-cell config-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -26916,7 +26916,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="config-table-cell config-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -27224,7 +27224,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="config-table-cell config-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -27530,7 +27530,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="config-table-cell config-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -27836,7 +27836,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -28142,7 +28142,7 @@ exports[`ConfigProvider components Table normal 1`] = `
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -28448,7 +28448,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="prefix-Table-cell prefix-Table-column-has-sorters"
                     scope="col"
                     tabindex="0"

diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx
@@ -105,9 +105,7 @@ describe('Table.sorter', () => {
 
     fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
-    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(
-      "this column's title is Name,this column is sortable",
-    );
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name');
   });
 
   it('sort records', () => {

diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
 >
   <tr>
     <th
-      aria-label="this column's title is Name,this column is sortable"
+      aria-label="Name"
       class="ant-table-cell ant-table-column-has-sorters"
       scope="col"
       tabindex="0"

diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`Table should render title 1`] = `
                 >
                   <tr>
                     <th
-                      aria-label="this column is sortable"
+                      aria-label=""
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -306,7 +306,7 @@ exports[`Table should render title 1`] = `
                       </div>
                     </th>
                     <th
-                      aria-label="this column is sortable"
+                      aria-label=""
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -370,7 +370,7 @@ exports[`Table should render title 1`] = `
                       </div>
                     </th>
                     <th
-                      aria-label="this column is sortable"
+                      aria-label=""
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -439,7 +439,7 @@ exports[`Table should render title 1`] = `
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is color,this column is sortable"
+                      aria-label="color"
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -501,7 +501,7 @@ exports[`Table should render title 1`] = `
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is sex,this column is sortable"
+                      aria-label="sex"
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"

diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1559,7 +1559,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.tsx extend context
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Address,this column is sortable"
+                    aria-label="Address"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -3203,7 +3203,7 @@ Array [
                       Name
                     </th>
                     <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -3516,7 +3516,7 @@ Array [
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is Action,this column is sortable"
+                      aria-label="Action"
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -7496,7 +7496,7 @@ exports[`renders ./components/table/demo/filter-in-tree.tsx extend context corre
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -8319,7 +8319,7 @@ exports[`renders ./components/table/demo/filter-search.tsx extend context correc
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -12166,7 +12166,7 @@ exports[`renders ./components/table/demo/grouping-columns.tsx extend context cor
                 </tr>
                 <tr>
                   <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                     class="ant-table-cell ant-table-column-has-sorters"
                     rowspan="3"
                     scope="col"
@@ -13261,7 +13261,7 @@ exports[`renders ./components/table/demo/head.tsx extend context correctly 1`] =
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -14623,7 +14623,7 @@ exports[`renders ./components/table/demo/multiple-sorter.tsx extend context corr
                     Name
                   </th>
                   <th
-                    aria-label="this column's title is Chinese Score,this column is sortable"
+                    aria-label="Chinese Score"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -14709,7 +14709,7 @@ exports[`renders ./components/table/demo/multiple-sorter.tsx extend context corr
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Math Score,this column is sortable"
+                    aria-label="Math Score"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -14795,7 +14795,7 @@ exports[`renders ./components/table/demo/multiple-sorter.tsx extend context corr
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is English Score,this column is sortable"
+                    aria-label="English Score"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -20341,7 +20341,7 @@ Array [
                 >
                   <tr>
                     <th
-                      aria-label="this column's title is Name,this column is sortable"
+                      aria-label="Name"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -20649,7 +20649,7 @@ Array [
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -20736,7 +20736,7 @@ Array [
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is Address,this column is sortable"
+                      aria-label="Address"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -21280,7 +21280,7 @@ exports[`renders ./components/table/demo/resizable-column.tsx extend context cor
                     />
                   </th>
                   <th
-                    aria-label="this column's title is Amount,this column is sortable"
+                    aria-label="Amount"
                     class="ant-table-cell ant-table-column-has-sorters react-resizable"
                     scope="col"
                     tabindex="0"

diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -1151,7 +1151,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.tsx correctly 1`] =
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Address,this column is sortable"
+                    aria-label="Address"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -2673,7 +2673,7 @@ Array [
                       Name
                     </th>
                     <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -2774,7 +2774,7 @@ Array [
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is Action,this column is sortable"
+                      aria-label="Action"
                       class="ant-table-cell ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -5772,7 +5772,7 @@ exports[`renders ./components/table/demo/filter-in-tree.tsx correctly 1`] = `
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -6121,7 +6121,7 @@ exports[`renders ./components/table/demo/filter-search.tsx correctly 1`] = `
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -9322,7 +9322,7 @@ exports[`renders ./components/table/demo/grouping-columns.tsx correctly 1`] = `
                 </tr>
                 <tr>
                   <th
-                    aria-label="this column's title is Age,this column is sortable"
+                    aria-label="Age"
                     class="ant-table-cell ant-table-column-has-sorters"
                     rowspan="3"
                     scope="col"
@@ -10289,7 +10289,7 @@ exports[`renders ./components/table/demo/head.tsx correctly 1`] = `
               >
                 <tr>
                   <th
-                    aria-label="this column's title is Name,this column is sortable"
+                    aria-label="Name"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -11030,7 +11030,7 @@ exports[`renders ./components/table/demo/multiple-sorter.tsx correctly 1`] = `
                     Name
                   </th>
                   <th
-                    aria-label="this column's title is Chinese Score,this column is sortable"
+                    aria-label="Chinese Score"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -11092,7 +11092,7 @@ exports[`renders ./components/table/demo/multiple-sorter.tsx correctly 1`] = `
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is Math Score,this column is sortable"
+                    aria-label="Math Score"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -11154,7 +11154,7 @@ exports[`renders ./components/table/demo/multiple-sorter.tsx correctly 1`] = `
                     </div>
                   </th>
                   <th
-                    aria-label="this column's title is English Score,this column is sortable"
+                    aria-label="English Score"
                     class="ant-table-cell ant-table-column-has-sorters"
                     scope="col"
                     tabindex="0"
@@ -15411,7 +15411,7 @@ Array [
                 >
                   <tr>
                     <th
-                      aria-label="this column's title is Name,this column is sortable"
+                      aria-label="Name"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -15507,7 +15507,7 @@ Array [
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is Age,this column is sortable"
+                      aria-label="Age"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -15570,7 +15570,7 @@ Array [
                       </div>
                     </th>
                     <th
-                      aria-label="this column's title is Address,this column is sortable"
+                      aria-label="Address"
                       class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
                       scope="col"
                       tabindex="0"
@@ -15902,7 +15902,7 @@ exports[`renders ./components/table/demo/resizable-column.tsx correctly 1`] = `
                     />
                   </th>
                   <th
-                    aria-label="this column's title is Amount,this column is sortable"
+                    aria-label="Amount"
                     class="ant-table-cell ant-table-column-has-sorters react-resizable"
                     scope="col"
                     tabindex="0"

diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx
@@ -212,9 +212,7 @@ function injectSorter<RecordType>(
           if (sorterOrder) {
             cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending';
           } else {
-            cell['aria-label'] = `${
-              displayTitle ? `this column's title is ${displayTitle},` : ''
-            }this column is sortable`;
+            cell['aria-label'] = displayTitle || '';
           }
           cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
           cell.tabIndex = 0;