Linear Progress
3.0.12
Linear Progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.
| Namn | Typ | Beskrivning |
|---|---|---|
accessibleText * | string | Alternative text for screen reader for the loader. Make it concrete and informative, e.g. "Loading departures, please wait...". Mandatory for WCAG 2.1. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
size | "default" |
"thin" | Size of the progress bar. Default is "default", but can be set to "thin" for a slimmer version. |
value | number | The value of the progress indicator for the determinate variant. Value between 0 and 100. |
npm install @sj-ab/component-library.ui.linear-progressSize
Default
Thin
Label
Examples
Example 1
Example 2
Linear Progress har ännu inte stöd för att användas som statisk mätare (t.ex. för att visa progress mellan SJ Prio-nivåer) på ett tillgängligt sätt. Komponenten behöver uppdateras för att stödja role="meter" istället för role="progressbar".
WAI-ARIA
Linear Progress är byggd som en "indeterminable progressbar".
Det innebär att den använder rollerna:
role="progressbar"för att kommunicera att komponenten är en laddindikatoraria-valueminmed implicit värde 0aria-valuemaxmed implicit värde 100aria-valuenowutan explicit värde, för att meddela att laddtiden är obestämd.aria-labelför att sätta ett namn på komponenten (använder accessibleText).
Utvecklare ansvarar för att sätta ett giltigt namn via propen accessibleText. I övrigt hanteras all WAI-ARIA internt i komponenten.
Importer av Linear Progress
Repos med Linear Progress
Senaste installerade version av Linear Progress
Äldsta installerade version av Linear Progress