GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

* feat: reset aria-label in table column

* feat: update snapshots
pull/39813/head
kiner-tang(文辉) 2 years ago
committed by GitHub
parent
62cefcae89
commit
671c6b7e54
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 48 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
  2. 4
      components/table/__tests__/Table.sorter.test.tsx
  3. 2
      components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap
  4. 10
      components/table/__tests__/__snapshots__/Table.test.tsx.snap
  5. 30
      components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
  6. 30
      components/table/__tests__/__snapshots__/demo.test.ts.snap
  7. 10
      components/table/hooks/useSorter.tsx

14
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -26947,7 +26947,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"
tabindex="0"
>
@ -27253,7 +27253,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"
tabindex="0"
>
@ -27561,7 +27561,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"
tabindex="0"
>
@ -27867,7 +27867,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"
tabindex="0"
>
@ -28173,7 +28173,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"
tabindex="0"
>
@ -28479,7 +28479,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"
tabindex="0"
>
@ -28785,7 +28785,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"
tabindex="0"
>

4
components/table/__tests__/Table.sorter.test.tsx
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', () => {

2
components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap
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"
tabindex="0"
>

10
components/table/__tests__/__snapshots__/Table.test.tsx.snap
View File

@ -234,7 +234,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"
tabindex="0"
>
@ -302,7 +302,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"
tabindex="0"
>
@ -365,7 +365,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"
tabindex="0"
>
@ -433,7 +433,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"
tabindex="0"
>
@ -494,7 +494,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"
tabindex="0"
>

30
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md 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"
tabindex="0"
>
@ -1546,7 +1546,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</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"
tabindex="0"
>
@ -3309,7 +3309,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"
tabindex="0"
>
@ -3620,7 +3620,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"
tabindex="0"
>
@ -7578,7 +7578,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md 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"
tabindex="0"
>
@ -8398,7 +8398,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
</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"
tabindex="0"
>
@ -12238,7 +12238,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
</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"
tabindex="0"
@ -13337,7 +13337,7 @@ exports[`renders ./components/table/demo/head.md 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"
tabindex="0"
>
@ -14688,7 +14688,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
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"
tabindex="0"
>
@ -14773,7 +14773,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
</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"
tabindex="0"
>
@ -14858,7 +14858,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
</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"
tabindex="0"
>
@ -20346,7 +20346,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"
tabindex="0"
title="Name"
@ -20653,7 +20653,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"
tabindex="0"
title="Age"
@ -20739,7 +20739,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"
tabindex="0"
title="Address"
@ -21281,7 +21281,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
/>
</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"
tabindex="0"
>

30
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md 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"
tabindex="0"
>
@ -1138,7 +1138,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md 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"
tabindex="0"
>
@ -2779,7 +2779,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"
tabindex="0"
>
@ -2878,7 +2878,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"
tabindex="0"
>
@ -5850,7 +5850,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md 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"
tabindex="0"
>
@ -6196,7 +6196,7 @@ exports[`renders ./components/table/demo/filter-search.md 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"
tabindex="0"
>
@ -9366,7 +9366,7 @@ exports[`renders ./components/table/demo/grouping-columns.md 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"
tabindex="0"
@ -10325,7 +10325,7 @@ exports[`renders ./components/table/demo/head.md 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"
tabindex="0"
>
@ -11055,7 +11055,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md 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"
tabindex="0"
>
@ -11116,7 +11116,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md 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"
tabindex="0"
>
@ -11177,7 +11177,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md 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"
tabindex="0"
>
@ -15364,7 +15364,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"
tabindex="0"
title="Name"
@ -15459,7 +15459,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"
tabindex="0"
title="Age"
@ -15521,7 +15521,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"
tabindex="0"
title="Address"
@ -15851,7 +15851,7 @@ exports[`renders ./components/table/demo/resizable-column.md 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"
tabindex="0"
>

10
components/table/hooks/useSorter.tsx
View File

@ -179,7 +179,7 @@ function injectSorter<RecordType>(
renderSortTitle
);
},
onHeaderCell: col => {
onHeaderCell: (col) => {
const cell: React.HTMLAttributes<HTMLElement> =
(column.onHeaderCell && column.onHeaderCell(col)) || {};
const originOnClick = cell.onClick;
@ -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;
@ -314,7 +312,7 @@ export function getSortData<RecordType>(
return 0;
})
.map<RecordType>(record => {
.map<RecordType>((record) => {
const subRecords = (record as any)[childrenColumnName];
if (subRecords) {
return {
@ -378,7 +376,7 @@ export default function useFilterSorter<RecordType>({
}
let multipleMode: boolean | null = null;
collectedStates.forEach(state => {
collectedStates.forEach((state) => {
if (multipleMode === null) {
patchStates(state);

Write Preview
Loading…
Cancel
Save