ScrollArea

component

A box whose content scrolls inside it, with thin scroll bars.

Preview

Light

…

Code

<twig:ScrollArea label="Release notes" style="block-size: 12rem">
    <p>…</p>
</twig:ScrollArea>

Dark

…

Code

<twig:ScrollArea label="Release notes" style="block-size: 12rem">
    <p>…</p>
</twig:ScrollArea>

Try it

Change the props; the example is rendered again by the server.

…

<twig:ScrollArea label="Release notes" style="block-size: 12rem">
    <p>…</p>
</twig:ScrollArea>

Variants

`orientation`

The direction in which the content scrolls.

…

orientation="vertical"

…

orientation="horizontal"

…

orientation="both"

Installation

php bin/console ux:install scroll-area --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`orientation`	`'vertical'\|'horizontal'\|'both'`	`'vertical'`	The direction in which the content scrolls.
`label`	`string\|null`	`null`	The name of the region, read by screen readers; it makes the box reachable at the keyboard.

Accessibility

With label, the box is a named region that the keyboard reaches and scrolls with the arrows (WCAG 2.1.1). Without it, the browsers of today make a scroller without focusable content reachable themselves.

Files to copy

templates/components/ScrollArea.html.twig

{#-
 # A box whose content scrolls inside it, with thin scroll bars. Named by `label`, it becomes a region the keyboard
 # reaches to scroll it; without a name, the browser makes the scroller focusable itself.
 #}
{%- props
    ## 'vertical'|'horizontal'|'both' The direction in which the content scrolls.
    orientation = 'vertical',
    ## string|null The name of the region, read by screen readers; it makes the box reachable at the keyboard.
    label = null
-%}
{%- set _orientation = orientation in ['vertical', 'horizontal', 'both'] ? orientation : 'vertical' -%}
<div data-slot="scroll-area" data-orientation="{{ _orientation }}"{% if label is not null %} role="region" aria-label="{{ label }}" tabindex="0"{% endif %}{{ attributes.defaults({class: 'isScrollArea' ~ ({vertical: ' isVertical', horizontal: ' isHorizontal'}[_orientation] ?? '')}) }}>
{##- The content that scrolls. -#}
{%- block content %}{% endblock -%}
</div>