CheckboxGrid

WCAG 2.1 AA — release blocker

Web (React DOM)

• Each item renders as <button role="checkbox" aria-checked={isSelected}>.
• The view tabs render as role="tablist" + role="tab" with aria-selected.
• The filter input is a SearchField (role="search").
• Select All / Clear are plain <button> elements — they don't need extra labels because their text describes the action.
• The summary count ("3 selected · 9 remaining") is plain text and updates on every state change so screen readers can re-announce when configured to.

Keyboard

• Tab moves through the summary controls → filter → first checkbox.
• Space / Enter toggles the focused checkbox.
• The view tabs and bulk buttons are Tab-able in DOM order.

Reduced motion

• Hover transitions on the checkbox borders are duration-short (200 ms). User agents honour prefers-reduced-motion.

Color is never the only signal

• Selected checkboxes have a fill (navy), not just a colour shift, plus a checkmark icon.
• The selected count reinforces state numerically — colour-blind users get the same information from the summary bar.

Audit checklist

• Every item button has aria-checked reflecting the state.
• View tabs have aria-selected reflecting the current view.
• Focus ring visible on every interactive element.
• 4.5:1 contrast on the item text in both selected and unselected states.
• Empty state ("No items match your filter") is plain text that screen readers will read.