Divider

P-09WCAG 2.2 AA · Passed #436

Axis	Values
`data-orientation`	horizontal (default) · vertical
`data-tone` · `data-inset` · `data-label`	subtle · strong / inset margins / labeled rule

or

Left

Right

Guidance

When to use

Separate groups of content in a panel, menu or form with a horizontal rule.
Separate inline items, such as toolbar groups or metadata, with data-orientation="vertical".
Indent a rule inside a list with data-inset so it lines up with the text.
Mark a labeled break, such as "Or" between two sign-in methods, with data-label.

When to consider something else

When rows in a list need separators, use List with data-divided instead of adding dividers between items. See List.
When groups of commands need separation, use Toolbar, whose groups handle their own separators. See Toolbar.
When sections need titles, use Text headings; a heading separates better than a line. See Text.

Usability

Do

Use the default subtle tone; use data-tone="strong" only between major sections.
Use spacing first and add a divider when spacing alone does not show the grouping.
Keep vertical dividers inside a flex row so they stretch to the row height.

Don’t

Don't stack dividers with borders on the same edge.
Don't use a divider to carry meaning such as "above is required".

Accessibility

Keyboard

No keyboard interaction of its own.

Roles and names

<hr class="qf-divider"> has the implicit role separator, which screen readers announce. Use it for a real break between sections.
For a purely decorative line, use role="presentation" on the hr or use a non-semantic element with aria-hidden="true".
A vertical separator that is announced needs aria-orientation="vertical"; the CSS orientation does not set it.

Focus

Divider is never focusable. Focusable separators that resize panes are Resizable handles, not dividers.

Other requirements

Divider is purely visual and has no keyboard behavior.
Decorative rules are exempt from non-text contrast; if a rule is the only thing that shows a group boundary, it needs 3:1 (1.4.11).
A labeled divider's text must meet 4.5:1 (1.4.3); it renders in the muted ink at the xs size, so check it in both themes.

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Divider test checklist
Area	Automated	A person checks
General	Passed	Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom	Passed	At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard	Passed	Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order.
Screen reader	Passed	With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (3 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- divider --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Divider package
Source	`css/classic/primitives/behavior.css`
Specimens also use	Box · Card · Chip · Icon · Table · Text · Toolbar
Sprites	`sprites/icons.svg`
React	Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes