Divider
A thin visual rule used to separate content sections or items. Supports horizontal and vertical orientations.
Keyboard interaction
diwa-divider is a non-interactive presentational element. It is not focusable and has no keyboard interaction. Screen readers announce it as a separator and move past it automatically.
Screen reader behaviour
The component renders a native <hr> element inside Shadow DOM. The role="separator" and aria-orientation are set automatically — no additional ARIA attributes are required on the consumer side.
| Attribute / Property | Value / Behaviour |
|---|---|
role | "separator" — implicit from the native <hr> element. |
aria-orientation | "horizontal" or "vertical" — derived automatically from the orientation prop. |
tabindex | Not set — the divider is skipped by keyboard navigation. |
aria-hidden | Not set — the separator is exposed to the accessibility tree so screen readers can announce section boundaries. |
WCAG 2.2 compliance
1.4.11 Non-text Contrast — AAPass
The divider line uses --diwa-border, which is tested to have ≥ 3:1 contrast ratio against the adjacent surface background tokens in both dark and light themes.
1.3.1 Info and Relationships — APass
The native <hr> element conveys its separator role programmatically, ensuring structural relationships expressed visually are also available to assistive technologies.
2.1.1 Keyboard — AN/A
The divider is not interactive and does not need to be keyboard operable. It is intentionally excluded from the tab order.
Best practices
- Do not suppress the separator from the accessibility tree. Avoid wrapping
diwa-dividerin anaria-hidden="true"container. Screen readers use separator landmarks to help users understand page structure and skip between sections. - Colour alone does not convey information. The divider line is decorative — it reinforces structure already present in the layout. Never use it as the sole indicator of a content boundary relied upon for comprehension.