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

* feat: reset aria-label in table column

* feat: reset aria-label in table column
This commit is contained in:
kiner-tang(文辉) 2022-12-22 20:47:46 +08:00 committed by GitHub
parent 0e98cb572c
commit b91bab09b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 47 deletions

View File

@ -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"

View File

@ -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', () => {

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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;