Accessibility

ARIA Roles and Attributes

The table library uses semantic HTML and ARIA attributes throughout to support assistive technologies:

• Semantic HTML table elements (<table>, <thead>, <tbody>, <tr>, <th>, <td>) provide native table semantics to screen readers.
• Pagination navigation is wrapped in a <nav> element with an aria-label identifying it as table pagination controls.
• Column header sort buttons include an aria-label describing the current sort state and the column being sorted.
• Row selection checkboxes carry an aria-label identifying the row they control, including 'select all' on the header checkbox.
• Filter buttons use aria-label to communicate the column they filter and whether a filter is currently active.
• Radix DropdownMenu provides full keyboard navigation with roving tabindex across menu items.
• Radix Popover traps focus within the popover content while it is open, returning focus to the trigger on close.
• The cmdk command palette uses role="listbox" with aria-selected on each option to communicate the highlighted selection to screen readers.

Keyboard Navigation

All interactive elements in the table are fully keyboard accessible:

• Tab — moves focus sequentially between interactive elements: pagination buttons, sort headers, filter controls, column visibility toggles, and action menus.
• Enter / Space — activates focused buttons, toggles checkboxes, opens and closes dropdowns and popovers.
• Arrow keys — navigate within open dropdown menus and command palettes, moving the highlighted item up and down through the list.
• Escape — closes open popovers, dropdowns, and mobile drawers, returning focus to the element that triggered them.
• Type-ahead — typing within the command palette performs incremental search, filtering the option list in real time as each character is entered.

Focus Management

Radix UI primitives handle focus trapping automatically for modal-like surfaces. When a modal, drawer, or popover opens, focus moves inside the overlay and is contained there until the overlay is dismissed. On close, focus returns to the triggering element.

The mobile drawer, built with vaul, manages its own focus lifecycle: focus moves into the drawer on open and is restored to the trigger on close, preventing focus from being lost behind the overlay.

The calendar date-picker component supports an initialFocus prop that moves focus to the selected or current date cell when the calendar opens, allowing immediate keyboard-driven date selection without additional Tab presses.