Accessibility in Apex Grid

The Apex grid ships ARIA semantics and keyboard affordances that follow the WCAG 2.2 AA grid pattern. Screen readers see the component as a tabular structure (or a tree-grid in tree-data mode); keyboard users can navigate, sort, expand, select, and edit without reaching for a pointer.

ARIA semantics

The host element advertises:

  • role="grid" (or role="treegrid" in tree-data mode).
  • aria-rowcount and aria-colcount reflecting the live shape — counts include the header row, the filter row when enabled, and any auto-added selection or expansion columns.

Header, filter, and body rows carry role="row" with aria-rowindex. Column headers carry role="columnheader" with aria-colindex plus aria-sort reflecting the per-column sort state. Cells carry role="gridcell" with aria-colindex and aria-current on the active cell. Body rows reflect aria-selected when selection is enabled and aria-expanded when row expansion or tree-data is enabled.

The filter condition trigger advertises aria-haspopup="listbox" with aria-expanded; the sort indicator is a real <button> with a descriptive aria-label and focus-visible styling.

Polite live announcements

The grid renders a polite aria-live region. Sort, page change, selection, and expansion updates announce themselves through it. Custom UI can post messages to the same channel:

grid.announce('Filter applied — 12 rows visible');

announce(message) debounces consecutive messages and prevents duplicates from overlapping the user's own actions.

Keyboard navigation

The grid follows the WCAG 2.2 AA grid keyboard pattern:

  • Arrow keys move the active cell.
  • Home / End jump to the first / last cell in the row; Ctrl+Home / Ctrl+End jump to the corner of the grid.
  • PageUp / PageDown move by the visible row count.
  • Space toggles the focused row's selection; Shift+Space extends from the anchor; Ctrl+A selects all in multiple-selection mode.
  • Enter or the configured edit trigger enters inline editing on the active cell.
  • Escape cancels an open editor; Tab commits and moves focus out of the cell.

Touch targets

Sort buttons, expansion chevrons, and filter chip-remove controls are sized to at least 24×24 CSS pixels to satisfy WCAG 2.5.8 (Target Size — Minimum).