Linear Progress

3.0.13

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.

Demo

NamnTypBeskrivning

accessibleText *

stringAlternative 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

numberThe value of the progress indicator for the determinate variant. Value between 0 and 100.

Installation

npm install @sj-ab/component-library.ui.linear-progress

Länkar

Best practices

Tillgänglighet

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 laddindikator

  • aria-valuemin med implicit värde 0

  • aria-valuemax med implicit värde 100

  • aria-valuenow utan explicit värde, för att meddela att laddtiden är obestämd.

  • aria-label fö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.

Change log

Statistik

  • Importer av Linear Progress

    8
  • Repos med Linear Progress

    20%
  • Senaste installerade version av Linear Progress

    3.0.12
  • Äldsta installerade version av Linear Progress

    1.0.33