Skip to content

fix(a11y): add button semantics to clickable datagrid/datatable rows - #11341

Open
forurmah wants to merge 1 commit into
marmelab:masterfrom
forurmah:fix/11108-datagrid-row-a11y
Open

fix(a11y): add button semantics to clickable datagrid/datatable rows#11341
forurmah wants to merge 1 commit into
marmelab:masterfrom
forurmah:fix/11108-datagrid-row-a11y

Conversation

@forurmah

Copy link
Copy Markdown

…(#11108)

Problem

Fixes #11108

Clickable rows in <Datagrid rowClick="..."> and <DataTable rowClick="...">
are rendered as plain <tr> elements with only an onClick handler. Screen
readers announce them as static text, not as interactive controls, even
though pressing Enter on them (when somehow focused) triggers navigation.

Reported by a blind NVDA user testing the react-admin helpdesk demo, who
expected clickable rows to be exposed as links or buttons.

Fix

When a row is clickable (rowClick is set, or the resource has a show/edit
view), the row now:

  • gets role="button"
  • gets tabIndex={0} so it's reachable via keyboard
  • responds to Enter and Space via a new onKeyDown handler, calling the
    same handleClick logic used for mouse clicks

Non-clickable rows are unaffected — no role, tabIndex, or onKeyDown
are added.

Applied to both:

  • packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx (legacy Datagrid)
  • packages/ra-ui-materialui/src/list/datatable/DataTableRow.tsx (DataTable)

Testing

Added tests in DatagridRow.spec.tsx covering:

  • role="button" and tabIndex="0" present on clickable rows, absent on non-clickable rows
  • Enter triggers the same navigation as a click
  • Space triggers the same navigation as a click
  • other keys (e.g. Tab) do not trigger navigation

All existing DatagridRow tests still pass unmodified.

Manually verified row navigation still works via mouse click and that
existing row interactions (checkbox selection, expand toggle) are
unaffected, since their handlers already call event.stopPropagation().

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.

accessibility: mui react table missing semantic

1 participant