diff --git a/packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx b/packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx index 0277f304871..46688abcff0 100644 --- a/packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx +++ b/packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx @@ -102,6 +102,36 @@ describe('DataTable', () => { ); }); }); + it('should set aria-sort on the currently sorted column header', async () => { + render(); + const headers = await screen.findAllByRole('columnheader'); + // Basic sorts by id ascending by default + expect(headers[1].getAttribute('aria-sort')).toEqual('ascending'); + // a column that is not the sort column has no aria-sort + expect(headers[2].getAttribute('aria-sort')).toBeNull(); + }); + it('should update aria-sort when the sort order changes', async () => { + render(); + const headers = await screen.findAllByRole('columnheader'); + // clicking the active ascending column switches it to descending + fireEvent.click(headers[1].firstChild as HTMLElement); + await waitFor(() => { + expect(headers[1].getAttribute('aria-sort')).toEqual( + 'descending' + ); + }); + }); + it('should move aria-sort to the newly sorted column', async () => { + render(); + const headers = await screen.findAllByRole('columnheader'); + fireEvent.click(headers[2].firstChild as HTMLElement); + await waitFor(() => { + expect(headers[2].getAttribute('aria-sort')).toEqual( + 'ascending' + ); + }); + expect(headers[1].getAttribute('aria-sort')).toBeNull(); + }); }); describe('Columns', () => { it('should render children as column headers', async () => { diff --git a/packages/ra-ui-materialui/src/list/datatable/DataTableHeadCell.tsx b/packages/ra-ui-materialui/src/list/datatable/DataTableHeadCell.tsx index 943fa049d01..099375f3387 100644 --- a/packages/ra-ui-materialui/src/list/datatable/DataTableHeadCell.tsx +++ b/packages/ra-ui-materialui/src/list/datatable/DataTableHeadCell.tsx @@ -93,6 +93,13 @@ export const DataTableHeadCell = React.memo( `column-${source}` )} variant="head" + sortDirection={ + sort && sort.field === source + ? sort.order === 'ASC' + ? 'asc' + : 'desc' + : false + } {...rest} > {handleSort && sort && !disableSort && source ? (