Table row — accessibility

Keyboard

  • The row stays a <tr>: a screen that wants keyboard operation opts in (rowKeyboard), which adds tabIndex=0 plus Enter and Space, rather than turning the row into a button and losing the table semantics.
  • The checkbox inside td.col-ck is 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-link is 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-mono uses tabular figures in the same ink; it is not a different colour.
  • Hover fill --hover-surface and selected fill --selected are tints; the checkbox is the real carrier of the selection.
  • .cell-link uses --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