Scroller
A horizontal scroll container with gradient fade indicators. Ideal for tab bars, tag lists, and other content that may overflow its container.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Tab through focus stops inside the scroll area (interactive children). |
| Arrow keys | When a focusable child has focus, arrow keys may scroll the container depending on browser behaviour. |
Screen reader behaviour
| Attribute / Property | Value / Behaviour |
|---|---|
overflow-x: auto | The scroll area is a standard overflow container. Screen readers expose all child content regardless of scroll position. |
WCAG 2.2 compliance
1.3.1 Info and Relationships — APass
The scroll container does not alter the semantic structure of its slotted children. All landmark roles, headings, and relationships remain intact.
1.4.10 Reflow — AAPass
Horizontal scroll is deliberate and not caused by fixed-width content. Scrollable areas declare overflow-x: auto, satisfying the reflow criterion.
2.1.1 Keyboard — APass
All interactive children inside the scroll area are reachable via standard keyboard navigation in DOM order.
2.4.7 Focus Visible — AAPass
Focus visibility is the responsibility of slotted focusable elements. The scroller does not override focus styles.
1.4.4 Resize Text — AAPass
The component uses no fixed widths; all sizing is defined with relative units so text scaling works correctly.
Best practices
- All content accessible — screen readers read all slotted children whether or not they are visually in the viewport. Overflow is a visual concern only.
- Scrollbar visibility — hiding the scrollbar (default) removes a visual affordance. Always ensure the gradient fade indicators are visible against the page background.