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 ? (