atom · stable · site, app · since 2026-08
ScrollRegion
Purpose
A zone that scrolls and can be reached with the keyboard. A div in overflow: auto never takes the focus: a table wider than its column scrolls with the mouse, the wheel, a finger, and not with the keyboard, so its off-screen columns are out of reach. The defect was found on the report, five zones, and again on the site and the app.
When to use, when not
Wrap anything that may overflow sideways: a wide table, a code block that must not wrap, a matrix. Do not wrap content that never overflows; a focusable region with nothing to scroll is a stop for nothing.
Anatomy
- A
div with tabindex="0", role="region" and a name. - Optionally a hairline frame.
Props
Props of ScrollRegion| Name | Type | Default | What it does |
|---|
label? | string | | What one enters. Becomes the region's accessible name, with "(zone défilante)" appended. |
|---|
labelledBy? | string | | The id of a heading already on the page, when the region is announced by it. One of `label` or `labelledBy` is required, or the stop is silent. |
|---|
class? | string | '' | Layout classes for the container: margins, gutters. |
|---|
framed? | boolean | false | A hairline frame. Off by default: the region is not a control. |
|---|
children | Snippet | | |
|---|
States
Named by a label, named by an existing heading, framed or not.
labelledBy
Named by the heading above it, so the name is not said twice.
Accessibility contract
- Role and name: a region named “X (zone défilante)”, or named by the heading given in
labelledBy. One of the two is required; without a name the stop is silent. - Keyboard: Tab reaches it, the arrow keys scroll it.
- Focus: the ring of the base layer.
- Live regions: none.
Content rules
The label says what one enters (“Tableau des critères”), not the fact that it scrolls: the component adds that word.
Do and don’t
- Do give the label the table’s caption or the section’s heading.
- Do not put interactive content only reachable by scrolling without a name on the region.
Examples
<ScrollRegion label="Matrice pages par critères" framed>
<table>...</table>
</ScrollRegion>
Surfaces
- App: the dashboard, the project page, the admin lists, the comparison, the report.
- Site: the coverage tables, the pricing grid.
Related
DataTable.
Decisions
- 2026-08: the Svelte warning on a non-interactive tabindex is silenced here, once, rather than in nine templates.
- 2026-09-24: renamed from ZoneDefilante, props
label, labelledBy, framed; the frame is a modifier class on the tokens.
Criteria held by construction
- 12.9, Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
A region that scrolls takes the focus, so its off-screen columns are reachable with the keyboard alone. - 12.8, Dans chaque page web, l'ordre de tabulation est-il cohérent ?
The region has a name, so the tab stop is not a silent one.
Tokens it reads
Seen in patterns
