DataTable accessibility

WCAG 2.1 AA requirements

Semantic HTML

• DataTable renders using the same Table, TableHeader, TableBody, TableRow, TableHead, and TableCell primitives — all native HTML table elements. Screen readers announce rows and columns correctly.

Sortable headers

• Sort buttons inside DataTableColumnHeader have aria-label="Sort by {column name}" so screen readers announce the action.
• Sort state is visually indicated with directional chevrons. The active direction uses a higher-contrast color.

Row selection

• Selection checkboxes use our Checkbox component with role="checkbox" and aria-checked.
• The header checkbox has aria-label="Select all".
• Each row checkbox has aria-label="Select row".
• Selected rows get data-state="selected", which the TableRow primitive styles with a muted background.

Expandable rows

• Expand buttons have aria-label="Expand row" / aria-label="Collapse row" that updates with state.
• Expanded content is rendered in a new TableRow with a single TableCell spanning all columns.

Search

• The search input uses our Input component with a visible magnifier icon and placeholder text.
• Results update live as the user types — no submit action needed.

Pagination

• Previous/Next buttons are disabled (not hidden) when at the boundary, maintaining a predictable layout.
• Page indicator text ("Page X of Y") provides context.
• Rows-per-page selector is a native <select> for keyboard accessibility.

Keyboard navigation

• All interactive elements (sort buttons, checkboxes, expand buttons, pagination buttons, search input) are focusable via Tab.
• Sort buttons respond to Enter and Space.
• Checkboxes respond to Enter and Space (handled by our Checkbox component).

Column filters

• Per-column filter inputs render below each header and are labelled with placeholder text matching the column name.
• Number-range inputs (min/max) for faceted number columns are individual <input type="number"> elements.
• Faceted value dropdowns are keyboard-navigable and close on outside click or Escape.

Column resizing

• Resize handles are rendered as drag targets on column borders. Dragging is mouse-only; keyboard users can rely on column visibility to manage visible data.

Row grouping

• Grouped rows use an expand/collapse button with the same aria-label pattern as expandable rows.
• Group header cells span all columns and display the group label with a row count.

Audit checklist

• Sort buttons have descriptive aria-labels
• Selection checkboxes have aria-labels
• Expand/collapse buttons update aria-label with state
• Disabled pagination buttons remain in the tab order
• Table renders with semantic HTML elements
• Empty state message is visible and readable by screen readers
• Column visibility dropdown is keyboard-accessible
• Per-column filter inputs have visible placeholder labels
• Faceted dropdowns are keyboard-accessible and close on Escape
• Group expand/collapse buttons have descriptive aria-labels