Separator

lightest of the thirty-two, by js weight

A rule between two things. An <hr>, which already carries the right role, plus the one thing it gets wrong and the one thing it cannot know.

Example (a11y tier)

Drafts

Sent

EditDuplicateDelete

Import

import Separator from 'abaabil/separator'         // structure only

import Separator from 'abaabil/separator/styled'  // + CSS

import Separator from 'abaabil/separator/a11y'    // + orientation, decorative

A vertical rule is announced as a horizontal one

This is the whole reason a separator is worth a component rather than an element. <hr> has an implicit aria-orientation of horizontal, and rotating it with CSS does not change that: the picture turns, the semantics do not. A screen reader user is told the two columns beside each other are stacked one above the other.

The a11y tier sets aria-orientation explicitly when the rule is vertical, and leaves it alone when it is horizontal, because the implicit value is already right and repeating it is noise.

Most rules mean nothing out loud

A rule between two sections of a document carries information. A rule between three buttons in a row is a visual device, and a screen reader announcing “separator” between every pair of them is noise standing where content should be.

decorative removes it from the accessibility tree entirely. It is opt-in rather than the default, because the first kind of rule does exist and silently hiding it would be the opposite mistake. The three vertical rules in the example above are decorative; the horizontal one is not.

Props

Prop	Type	Default	Tier	Description
`orientation`	'horizontal' \| 'vertical'	'horizontal'	all	Applied as `data-orientation`.
`decorative`	boolean	false	a11y	Hides it from assistive technology.
`className`	string	—	all	Merged with the base class.