mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Fix: sortable columns are not indicated as such for screen readers (#37167)

Browse Source
This commit is contained in:
Dmitry Artamonov 2022-08-21 04:39:54 -04:00 committed by GitHub
parent 0868bff4d1
commit a34c9cef7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 149 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -26723,6 +26723,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
>
<tr>
<th
aria-label="Name sortable"
class="config-table-cell config-table-column-has-sorters"
tabindex="0"
>
@ -26749,7 +26750,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -26768,7 +26769,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27024,6 +27025,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
>
<tr>
<th
aria-label="Name sortable"
class="config-table-cell config-table-column-has-sorters"
tabindex="0"
>
@ -27050,7 +27052,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27069,7 +27071,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27327,6 +27329,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
>
<tr>
<th
aria-label="Name sortable"
class="config-table-cell config-table-column-has-sorters"
tabindex="0"
>
@ -27353,7 +27356,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27372,7 +27375,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27628,6 +27631,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
>
<tr>
<th
aria-label="Name sortable"
class="config-table-cell config-table-column-has-sorters"
tabindex="0"
>
@ -27654,7 +27658,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27673,7 +27677,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27929,6 +27933,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -27955,7 +27960,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -27974,7 +27979,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -28230,6 +28235,7 @@ exports[`ConfigProvider components Table normal 1`] = `
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -28256,7 +28262,7 @@ exports[`ConfigProvider components Table normal 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -28275,7 +28281,7 @@ exports[`ConfigProvider components Table normal 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -28531,6 +28537,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
>
<tr>
<th
aria-label="Name sortable"
class="prefix-Table-cell prefix-Table-column-has-sorters"
tabindex="0"
>
@ -28557,7 +28564,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -28576,7 +28583,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"

27
components/table/__tests__/Table.sorter.test.js
View File

@ -104,6 +104,33 @@ describe('Table.sorter', () => {
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
});
it('should have aria-lable if the column is sortable and is not sorted', () => {
const { container } = render(
createTable(
{
sortDirections: ['descend', 'ascend'],
},
{
defaultSortOrder: 'descend',
},
),
);
const getNameColumn = () => container.querySelector('th');
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
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-sort')).toEqual(null);
expect(getNameColumn().getAttribute('aria-label')).toEqual('Name sortable');
});
it('sort records', () => {
const { container } = render(createTable());
const getNameColumn = () => container.querySelector('th');

9
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -6,6 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -26,7 +27,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -45,7 +46,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -118,7 +119,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up active"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -137,7 +138,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"

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

@ -35,6 +35,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -55,7 +56,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -74,7 +75,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -1516,6 +1517,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</div>
</th>
<th
aria-label="Address sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -1542,7 +1544,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -1561,7 +1563,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -3266,6 +3268,7 @@ Array [
Name
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -3286,7 +3289,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -3305,7 +3308,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -3576,6 +3579,7 @@ Array [
</div>
</th>
<th
aria-label="Action sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -3596,7 +3600,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -3615,7 +3619,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -7531,6 +7535,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
</div>
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -7551,7 +7556,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -7570,7 +7575,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -8351,6 +8356,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
</div>
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -8371,7 +8377,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -8390,7 +8396,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -12223,6 +12229,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
</tr>
<tr>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
rowspan="3"
tabindex="0"
@ -12244,7 +12251,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -12263,7 +12270,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -13330,6 +13337,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -13356,7 +13364,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -13834,7 +13842,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -13853,7 +13861,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down active"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -14676,6 +14684,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
Name
</th>
<th
aria-label="Chinese Score sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -14696,7 +14705,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -14715,7 +14724,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -14760,6 +14769,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
</div>
</th>
<th
aria-label="Math Score sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -14780,7 +14790,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -14799,7 +14809,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -14844,6 +14854,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
</div>
</th>
<th
aria-label="English Score sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -14864,7 +14875,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -14883,7 +14894,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -20360,6 +20371,7 @@ Array [
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
>
@ -20386,7 +20398,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -20405,7 +20417,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -20665,6 +20677,7 @@ Array [
</div>
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
>
@ -20685,7 +20698,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -20704,7 +20717,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -20749,6 +20762,7 @@ Array [
</div>
</th>
<th
aria-label="Address sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
>
@ -20775,7 +20789,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -20794,7 +20808,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -21290,6 +21304,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
/>
</th>
<th
aria-label="Amount sortable"
class="ant-table-cell ant-table-column-has-sorters react-resizable"
tabindex="0"
>
@ -21310,7 +21325,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -21329,7 +21344,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"

77
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -35,6 +35,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -55,7 +56,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -74,7 +75,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -1134,6 +1135,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
</div>
</th>
<th
aria-label="Address sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -1160,7 +1162,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -1179,7 +1181,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -2775,6 +2777,7 @@ Array [
Name
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -2795,7 +2798,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -2814,7 +2817,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -2873,6 +2876,7 @@ Array [
</div>
</th>
<th
aria-label="Action sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -2893,7 +2897,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -2912,7 +2916,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -5850,6 +5854,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
</div>
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -5870,7 +5875,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -5889,7 +5894,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -6196,6 +6201,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
</div>
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -6216,7 +6222,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -6235,7 +6241,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -9394,6 +9400,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
</tr>
<tr>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-column-has-sorters"
rowspan="3"
tabindex="0"
@ -9415,7 +9422,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -9434,7 +9441,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -10361,6 +10368,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -10387,7 +10395,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -10456,7 +10464,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -10475,7 +10483,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down active"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -11086,6 +11094,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
Name
</th>
<th
aria-label="Chinese Score sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -11106,7 +11115,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -11125,7 +11134,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -11146,6 +11155,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</div>
</th>
<th
aria-label="Math Score sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -11166,7 +11176,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -11185,7 +11195,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -11206,6 +11216,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</div>
</th>
<th
aria-label="English Score sortable"
class="ant-table-cell ant-table-column-has-sorters"
tabindex="0"
>
@ -11226,7 +11237,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -11245,7 +11256,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15421,6 +15432,7 @@ Array [
>
<tr>
<th
aria-label="Name sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
>
@ -15447,7 +15459,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15466,7 +15478,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15514,6 +15526,7 @@ Array [
</div>
</th>
<th
aria-label="Age sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
>
@ -15534,7 +15547,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15553,7 +15566,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15574,6 +15587,7 @@ Array [
</div>
</th>
<th
aria-label="Address sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
>
@ -15600,7 +15614,7 @@ Array [
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15619,7 +15633,7 @@ Array [
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15903,6 +15917,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
/>
</th>
<th
aria-label="Amount sortable"
class="ant-table-cell ant-table-column-has-sorters react-resizable"
tabindex="0"
>
@ -15923,7 +15938,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
role="presentation"
>
<svg
aria-hidden="true"
@ -15942,7 +15957,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
role="presentation"
>
<svg
aria-hidden="true"

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

@ -132,6 +132,7 @@ function injectSorter<RecordType>(
className={classNames(`${prefixCls}-column-sorter-up`, {
active: sorterOrder === ASCEND,
})}
role="presentation"
/>
);
const downNode: React.ReactNode = sortDirections.includes(DESCEND) && (
@ -139,6 +140,7 @@ function injectSorter<RecordType>(
className={classNames(`${prefixCls}-column-sorter-down`, {
active: sorterOrder === DESCEND,
})}
role="presentation"
/>
);
const { cancelSort, triggerAsc, triggerDesc } = tableLocale || {};
@ -210,6 +212,8 @@ function injectSorter<RecordType>(
} else {
cell['aria-sort'] = 'descending';
}
} else {
cell['aria-label'] = `${renderColumnTitle(column.title, {})} sortable`;
}
cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);