Progress primitive
Headless Progress: the behavior, keyboard support and ARIA of the WAI-ARIA progressbar role pattern, with no styles.
@ndop/primitives/progress- WAI-ARIA: progressbar 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 Progress is built on this one.
import { NdProgress, NdProgressIndicator } from '@ndop/primitives/progress';Accessibility
Implements the progressbar role pattern of the WAI-ARIA Authoring Practices.
Focus
- The progress bar never receives focus and never changes focus.
Right-to-left
The indicator fills from the start side: from the right in right-to-left layouts.
API reference
NdProgress
[ndProgress]role progressbarfrom @ndop/primitives/progressHeadless progress bar, the WAI-ARIA progressbar role: how far a task
has got, from 0 to max, or indeterminate while value is null. It
announces the percentage, and exposes it for styling the indicator's
width. Give it a name with aria-label or aria-labelledby.
Manages aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext.
| NdProgress binding | Type | Default |
|---|---|---|
[value]How far the task has got, from 0 to max; null while unknown. | number | null | null |
[max]The value of a finished task. | number | 100 |
| Data attribute | Values |
|---|---|
data-state | — |
data-value | — |
data-max | — |
NdProgressIndicator
[ndProgressIndicator]from @ndop/primitives/progressThe filled part of a NdProgress. Presentational: the root
announces the value.
| Data attribute | Values |
|---|---|
data-state | — |