feat: resolves issue 33572 re aria-sort on tables (#33603)

* feat: resolves issue 33572 re aria-sort on tables

* fixing snapshots

* removing code that can't be hit anyway

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

@@ -68,19 +68,55 @@ describe('Table.sorter', () => {
       ),
     );
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+  });
+
+  it('should change aria-sort when default sort order is set to descend', () => {
+    const wrapper = mount(
+      createTable(
+        {
+          sortDirections: ['descend', 'ascend'],
+        },
+        {
+          defaultSortOrder: 'descend',
+        },
+      ),
+    );
+
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // Test that it cycles through the order of sortDirections
+    expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+    wrapper.find('.ant-table-column-sorters').simulate('click');
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+    wrapper.find('.ant-table-column-sorters').simulate('click');
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('sort records', () => {
     const wrapper = mount(createTable());
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // first assert default state
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
     // ascend
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // descend
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
   });
 
   describe('can be controlled by sortOrder', () => {
@@ -333,12 +369,16 @@ describe('Table.sorter', () => {
     // sort name
     getNameColumn().simulate('click');
     expect(getNameIcon('up').hasClass('active')).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
     expect(getAgeIcon('up').hasClass('active')).toBeFalsy();
+    expect(getAgeColumn().prop('aria-sort')).toEqual(undefined);
 
     // sort age
     getAgeColumn().simulate('click');
     expect(getNameIcon('up').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
     expect(getAgeIcon('up').hasClass('active')).toBeTruthy();
+    expect(getAgeColumn().prop('aria-sort')).toEqual('ascending');
   });
 
   // https://github.com/ant-design/ant-design/issues/12571
@@ -380,7 +420,7 @@ describe('Table.sorter', () => {
 
     const wrapper = mount(<TableTest />);
 
-    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
+    const getNameColumn = () => wrapper.find('th').at(0);
     const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
 
     expect(getIcon('up').hasClass('active')).toBeFalsy();
@@ -390,16 +430,19 @@ describe('Table.sorter', () => {
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeTruthy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   // https://github.com/ant-design/ant-design/issues/12737
@@ -444,7 +487,7 @@ describe('Table.sorter', () => {
 
     const wrapper = mount(<TableTest />);
 
-    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
+    const getNameColumn = () => wrapper.find('th').at(0);
     const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
 
     expect(getIcon('up').hasClass('active')).toBeFalsy();
@@ -454,16 +497,19 @@ describe('Table.sorter', () => {
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeTruthy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   // https://github.com/ant-design/ant-design/issues/12870
@@ -508,13 +554,14 @@ describe('Table.sorter', () => {
     }
 
     const wrapper = mount(<TableTest />);
-    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
+    const getNameColumn = () => wrapper.find('th').at(0);
     expect(
       getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
     ).toBeFalsy();
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
 
     // sort name
     getNameColumn().simulate('click');
@@ -524,6 +571,7 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
@@ -533,6 +581,7 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
@@ -542,6 +591,7 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then ascend, then cancel sort', () => {
@@ -550,18 +600,22 @@ describe('Table.sorter', () => {
         sortDirections: ['descend', 'ascend'],
       }),
     );
+    const getNameColumn = () => wrapper.find('th').at(0);
 
     // descend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // ascend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // cancel sort
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then cancel sort', () => {
@@ -571,13 +625,20 @@ describe('Table.sorter', () => {
       }),
     );
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // default
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
     // descend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // cancel sort
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then cancel sort. (column prop)', () => {
@@ -590,13 +651,20 @@ describe('Table.sorter', () => {
       ),
     );
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // default
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
     // descend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // cancel sort
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('pagination back', () => {
@@ -614,9 +682,14 @@ describe('Table.sorter', () => {
       }),
     );
 
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
+    getNameColumn().simulate('click');
     expect(onChange.mock.calls[0][0].current).toBe(2);
     expect(onPageChange).not.toHaveBeenCalled();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
   });
 
   it('should support onHeaderCell in sort column', () => {

components/table/__tests__/__snapshots__/Table.sorter.test.js.snap

@@ -96,6 +96,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
               >
                 <tr>
                   <th
+                    aria-sort="ascending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div

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

@@ -12778,6 +12778,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
                     </div>
                   </th>
                   <th
+                    aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -9898,6 +9898,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div

components/table/hooks/useSorter.tsx

@@ -192,6 +192,15 @@ function injectSorter<RecordType>(
             }
           };
 
+          // Inform the screen-reader so it can tell the visually impaired user which column is sorted
+          if (sorterOrder) {
+            if (sorterOrder === 'ascend') {
+              cell['aria-sort'] = 'ascending';
+            } else {
+              cell['aria-sort'] = 'descending';
+            }
+          }
+
           cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
 
           return cell;