ScrollArea

Role and semantics

ScrollArea keeps the browser’s native scrolling through Base UI ScrollArea. The viewport is always in the tab order (tabindex="0"), so content without interactive elements can still be scrolled by keyboard. With label the viewport gets role="region" and aria-label. The scrollbars are decorative; screen readers and keyboards scroll through the browser.

Keyboard

Key	Behaviour
Tab	Focuses the viewport, then moves into its content.
Up and down arrow	Scrolls vertically.
Left and right arrow	Scrolls horizontally.
Page Up, Page Down, Space	Scrolls by one page.
Home, End	Goes to the start or the end.

Focus

When the viewport has focus a 2 px color-focus-ring ring is drawn inside it, because an outer ring could be clipped by the container. When an element inside takes focus the browser scrolls it into view.

Screen reader output

Example	Read as
Focus on an area with label="Item list"	“Item list, region”
Focus on an area without label	The first text of the content
A list inside the area	“List, 20 items”

Contrast

The thumb (color-line-strong) is close to 3:1 against the background but is not the only cue: scrolling also works with the browser and keyboard, and the edge fade shows hidden content. The focus ring color-focus-ring meets at least 3:1.

WCAG 2.2

Criterion	How ScrollArea meets it	What the product team must do
2.1.1 Keyboard	The viewport takes focus; arrow keys scroll.	Do not change its tabIndex.
2.4.7 Focus visible	Inner focus ring.	Do not remove the ring.
1.4.10 Reflow	Two-way scrolling only with both and for content that needs it.	Do not scroll text in two directions; use it where needed, such as tables.
4.1.2 Name, role, value	Named region with label.	Name each area when a page has several.