Separator primitive
Headless Separator: the behavior, keyboard support and ARIA of the WAI-ARIA separator role pattern, with no styles.
@ndop/primitives/separator- WAI-ARIA: separator role
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Separator is built on this one.
import { NdSeparator } from '@ndop/primitives/separator';Accessibility
Implements the separator role pattern of the WAI-ARIA Authoring Practices.
Focus
- The separator never receives focus and never changes focus.
Right-to-left
Nothing mirrors: orientation is the same in both directions.
API reference
NdSeparator
[ndSeparator]role separator or nonefrom @ndop/primitives/separatorHeadless separator between groups of content. Sets role="separator",
with aria-orientation when vertical, or role="none" when decorative so
assistive technology skips it. data-orientation always reflects the
orientation, for styling. Not focusable.
Manages aria-orientation.
| NdSeparator binding | Type | Default |
|---|---|---|
[orientation]Layout direction of the separator. | 'vertical' | 'horizontal' | 'horizontal' |
[decorative]Whether the separator is purely visual. Decorative separators are
hidden from assistive technology. | boolean | false |
| Data attribute | Values |
|---|---|
data-orientation | — |