What the component handles
- Proper table semantics with role="table", aria-colcount, and aria-rowcount
- Column header semantics with scope="col" on all headers
- Cell positioning with aria-colindex and aria-rowindex for screen reader announcements
- aria-sort state management on sortable column headers
- aria-selected state on rows when selection is enabled
- aria-expanded state on expandable group rows
- aria-busy state during loading
- Live region announcements for selection count updates and empty state messages
- Decorative gap column hidden from assistive technology with role="presentation”
- For group rows, aria-selected reflects whether all child rows are selected
- aria-labelledby linking the table to its visible title when provided
What you need to provide
- Descriptive text for all column headers via the header property in column definitions
- accessibleText prop for any icon-only ActionToolbarButton in the action toolbar
- Meaningful emptyState.primaryText describing why no data is displayed
- Accessible names for any custom interactive elements rendered in cells
Keyboard support
|
Key |
Action |
|---|---|
|
Tab |
Move focus between interactive elements |
|
Enter / Space |
Activate buttons, toggle checkboxes, expand/collapse groups |
|
Escape |
Close open dropdowns and menus |
|
Arrow Up/Down |
Navigate within dropdown menus |
|
Home/End |
Jump to first/last option in dropdowns |
Known limitations
- Column resize handles are not keyboard accessible
- Column reordering via drag-and-drop has no keyboard alternative
- Arrow key navigation between cells is not supported; users must Tab sequentially
- Focus may be lost when scrolling in virtualized mode
- Nested interactive pattern in sortable column headers
Color contrast
Meets WCAG 2.1 AA color contrast ratio requirements for all interactive states including selected rows, sort indicators, and focus outlines.