accessibility

Use roving tabindex so only the active item has tabIndex 0 while others use -1, and handle Arrow Down/Up to move between items with Home/End jumping to the ends. Apply role="menu" on the container, role="menuitem" on items, and aria-haspopup plus aria-expanded on the trigger. Tab and Escape should close the menu and return focus to the trigger.

Import FocusScope from the radix-ui package and wrap the dialog content with the loop and trapped props. FocusScope moves focus into the dialog on mount and returns it on unmount. Prefer the shadcn Dialog component when possible since it wraps FocusScope and handles aria-modal, Escape dismissal, and focus return automatically.

Yes, shadcn/ui components are built on Radix UI primitives that handle ARIA roles, keyboard navigation, and focus management by default. Dialog, DropdownMenu, Select, Tabs, Checkbox, Tooltip, and similar components ship with correct roles and key interactions, so you should not re-implement what they already provide.

WCAG 2.2 added nine criteria including Focus Not Obscured (2.4.11 AA), Dragging Movements (2.5.7 AA), Target Size Minimum of 24x24 CSS pixels (2.5.8 AA), Consistent Help (3.2.6 A), Redundant Entry (3.3.7 A), and Accessible Authentication (3.3.8 AA). All AA items are required for conformance while AAA items are aspirational.

Use @axe-core/playwright in Playwright tests to scan pages with WCAG 2.2 AA tags and assert zero violations, plus vitest-axe for component-level unit tests. Add a GitHub Actions workflow that runs on pull requests, builds the app, executes the Playwright accessibility project, and fails the build when violations are found.

This violates WCAG 2.4.11 Focus Not Obscured at Level AA. Fix it by adding scroll-margin-top to focused elements, for example a CSS rule applying scroll-margin-top equal to the header height plus a margin on all focus-visible elements, or use the Tailwind focus-visible:scroll-mt-20 utility.