Add aria-sort to sorted DataTable column headers - #11339
Closed
olitreadwell wants to merge 1 commit into
Closed
Conversation
The DataTable header cells did not expose the current sort state to assistive technology. A screen reader user could not tell which column was sorted, or in which direction. Pass the active sort direction to the MUI TableCell via its `sortDirection` prop. MUI turns this into `aria-sort="ascending"` or `aria-sort="descending"` on the `<th>` of the sorted column only. Other columns get no `aria-sort`, per the ARIA spec. Add unit tests that check `aria-sort` is set on the sorted column, moves when another column is sorted, and flips when the order changes.
olitreadwell
force-pushed
the
contrib/marmelab-react-admin-20260805-110228
branch
from
August 12, 2026 04:15
0ab6b48 to
5ffe933
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
DataTable column headers did not expose the current sort state to
assistive technology. There was no
aria-sorton any<th>, so ascreen reader user could not tell which column the table was sorted by,
or in which direction.
This is a distinct, self-found gap in the sortable headers. It is
related to the maintainer-confirmed screen-reader/table-semantics
discussion in #11108, but that issue is about clickable rows, not the
column-header sort state — so this PR does not close it.
Solution
Pass the active sort direction to the MUI
TableCellthrough itssortDirectionprop. MUI maps that prop toaria-sort="ascending"oraria-sort="descending"on the<th>element.Only the currently sorted column receives
aria-sort; other columns getnone, which matches the ARIA spec. The change is one prop on
DataTableHeadCell; no visual change.How To Test
From the repo root:
The three new tests under
DataTable > Sortingfail onmasterand passwith this change. Manual: open any DataTable, turn on a screen reader,
and confirm the sorted column announces "sorted ascending/descending".
Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a featureDataTable.spec.tsx)BasicDataTable story the new tests render.aria-sortis internal behaviour with no public API change.Checks run locally
DataTable.spec.tsx30 passed (3 new);list/datatablefolder 34 passedlerna run buildfor ra-ui-materialui + deps): PASSScope
One logical change:
aria-sorton the modernDataTableheader cell + itstests. The legacy
Datagrid(DatagridHeaderCell) has the same gap; leftfor a separate follow-up PR to keep this one reviewable.
AI disclosure
Drafted with AI assistance. I found the gap, wrote the failing tests
first to prove it, verified the fix makes them pass, and reviewed the
diff line by line. marmelab/react-admin does not require an AI-disclosure;
included here as good practice.
Promotion note (fork-staged)
This PR is staged inside the fork (
olitreadwell/react-admin, basemaster). To open it upstream:No CLA, DCO, or signed commits are required by CONTRIBUTING. Consider
referencing #11108 (related table-a11y discussion) when promoting.