Role and semantics
Section titled “Role and semantics”Separator is the Base UI element with role="separator", and it reports its direction with aria-orientation (horizontal or vertical). With decorative, it becomes role="none" and aria-orientation is removed; the rule leaves the accessibility tree.
On a labelled, non-decorative Separator, the label text names the Separator through aria-labelledby. With decorative, the label stays visible but is not linked as a name.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Separator takes no focus; Tab moves past it. Separator has no keys of its own. |
None. Separator is not in the focus order and shows no focus ring.
Screen reader output
Section titled “Screen reader output”Output varies a little by screen reader and browser; the column below shows the general behaviour.
| Example | Announced |
|---|---|
<Separator /> |
“Separator” |
<Separator label="or" /> |
“or, separator” |
<Separator decorative /> |
Nothing is announced |
<Separator orientation="vertical" /> |
“Separator” (the vertical direction may be announced) |
When a heading or a list already announces the grouping, use decorative; the screen reader then skips a redundant “separator”.
Contrast
Section titled “Contrast”The rule is decoration that carries no meaning; the grouping is also clear from the structure. The color-border-subtle rule colour is not a separate pair in the token contrast test.
The label text in color-text-subtle on the page surface (color-surface-default) has at least 4.5:1 contrast; the test in the tokens package checks this pair on every build, for every brand and mode.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Separator meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | The rule is announced with role="separator"; when decorative, it is hidden with role="none". |
Use decorative when a heading already announces the grouping. |
| 1.4.3 Contrast (minimum) | The label text is tested as a 4.5:1 pair. | Do not set colours with className. |
| 1.4.11 Non-text contrast | The rule is decoration only; do not tie meaning to it. | Do not express a boundary with the rule alone; let structure and headings announce the grouping too. |
| 4.1.2 Name, role, value | With label, aria-labelledby supplies the name. |
Keep the label short and meaningful. |