Skip to content

Add aria-sort to sorted DataTable column headers - #11339

Closed
olitreadwell wants to merge 1 commit into
marmelab:masterfrom
olitreadwell:contrib/marmelab-react-admin-20260805-110228
Closed

Add aria-sort to sorted DataTable column headers#11339
olitreadwell wants to merge 1 commit into
marmelab:masterfrom
olitreadwell:contrib/marmelab-react-admin-20260805-110228

Conversation

@olitreadwell

Copy link
Copy Markdown

Problem

DataTable column headers did not expose the current sort state to
assistive technology. There was no aria-sort on any <th>, so a
screen 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 TableCell through its
sortDirection prop. MUI maps that prop to aria-sort="ascending" or
aria-sort="descending" on the <th> element.

Only the currently sorted column receives aria-sort; other columns get
none, which matches the ARIA spec. The change is one prop on
DataTableHeadCell; no visual change.

How To Test

From the repo root:

yarn install
LANG=en_US.UTF-8 NODE_ENV=test BABEL_ENV=cjs NODE_ICU_DATA=./node_modules/full-icu \
  node_modules/.bin/jest packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx

The three new tests under DataTable > Sorting fail on master and pass
with this change. Manual: open any DataTable, turn on a screen reader,
and confirm the sorted column announces "sorted ascending/descending".

Additional Checks

  • The PR targets master for a bugfix or a documentation fix, or next for a feature
  • The PR includes unit tests (3 new tests in DataTable.spec.tsx)
  • The PR includes one or several stories — not needed: this is an a11y fix to existing behaviour, covered by the existing Basic DataTable story the new tests render.
  • The documentation is up to date — no doc change: aria-sort is internal behaviour with no public API change.

Checks run locally

  • Tests: PASS — DataTable.spec.tsx 30 passed (3 new); list/datatable folder 34 passed
  • Lint (eslint): PASS on the two changed files (+ husky lint-staged on commit)
  • Prettier: PASS on the two changed files
  • Build/typecheck (lerna run build for ra-ui-materialui + deps): PASS

Scope

One logical change: aria-sort on the modern DataTable header cell + its
tests. The legacy Datagrid (DatagridHeaderCell) has the same gap; left
for 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, base
master). To open it upstream:

gh pr create --repo marmelab/react-admin --base master \
  --head olitreadwell:contrib/marmelab-react-admin-20260805-110228

No CLA, DCO, or signed commits are required by CONTRIBUTING. Consider
referencing #11108 (related table-a11y discussion) when promoting.

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
olitreadwell force-pushed the contrib/marmelab-react-admin-20260805-110228 branch from 0ab6b48 to 5ffe933 Compare August 12, 2026 04:15
@olitreadwell
olitreadwell deleted the contrib/marmelab-react-admin-20260805-110228 branch August 12, 2026 11:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant