WCAG 2.1 AA — release blocker
ScrollArea must satisfy these on every render before it ships.
Web (React DOM)
- Renders a
divwithoverflow: hiddenand an internal viewport. - Scrollbar is a separate DOM element — purely decorative, does not interfere with native scroll semantics.
- The viewport is the actual scrollable container and retains native scroll behavior.
- Content inside ScrollArea is fully keyboard-navigable (Tab through focusable elements).
Keyboard
| Key | Action |
|---|---|
Tab | Move focus through items inside the scroll area. |
Arrow Up/Down | Scroll vertically (native browser behavior). |
Page Up/Down | Scroll by one viewport height. |
Home / End | Scroll to top / bottom. |
Touch
Touch scrolling works natively — the scrollbar has touch-none but the viewport handles touch gestures.
React Native
- ScrollArea wraps React Native's
ScrollViewon native.
Audit checklist
- Content inside scroll area is Tab-navigable
- Scrollbar does not steal focus
- Touch scroll works on mobile
- Viewport respects
prefers-reduced-motionfor smooth-scroll