Table row — accessibility
Keyboard
- The row stays a
<tr>: a screen that wants keyboard operation opts in (rowKeyboard), which addstabIndex=0plus Enter and Space, rather than turning the row into a button and losing the table semantics. - The checkbox inside
td.col-ckis a real input, so Space toggles it; the cell stops the click from bubbling to the row, so picking never opens the record by accident. - A
.cell-linkis a real button or link and is reached by Tab like any other control.
ARIA
- Every cell is announced with its column header, because the header cells are
<th>. - The row checkbox is labelled by the record it selects.
- The avatar in the identity cell is decorative; the name carries the meaning.
- A clipped name keeps its full text in
title, which assistive technology reads as the description.
Focus
- Rows and cell controls take the foundation ring from
ds.css. - The checkbox draws its ring on the visible box, because the real input is visually hidden.
- The identity and checkbox columns are frozen, so a focused row keeps its context while the table scrolls sideways.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- Cell text in ink — above AA in both themes.
.cell-monouses tabular figures in the same ink; it is not a different colour.- Hover fill
--hover-surfaceand selected fill--selectedare tints; the checkbox is the real carrier of the selection. .cell-linkuses--accent= 4.44:1 light, 3.83:1 dark.
Known limits
- Selection is visible as a fill plus the checkbox; for a colour-blind user the checkbox is the only reliable signal, which is why it stays visible once picked.
- A clipped value needs a hover (or assistive technology) to be read in full.
- The row has no disabled state; a record that cannot be opened has to be left out or handled by the screen.
Source: docs/table/table-row.a11y.md · GitLab