Linear Progress
4.0.1
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 readers 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-progress
Komponenten har stöd för två varianter:
variant="determinate"
– Visar ett specifikt förloppsvärde mellan 0 och 100.variant="indeterminate"
– Visar en animerad laddningsindikator utan angivet värde (används när förloppet inte kan mätas).För att komponenten ska vara tillgänglig för alla användare, inklusive de som använder skärmläsare, används följande WAI-ARIA-attribut:
role="progressbar"
– Indikerar att elementet är en förloppsindikator.aria-valuemin
– Anger minsta värde (implicit satt till 0
).aria-valuemax
– Anger högsta värde (implicit satt till 100
).aria-valuenow
– Anger aktuellt värde vid determinate-variant. Utesluts helt vid indeterminate-variantför att visa att värdet är okänt.Komponenten måste ha en tillgänglig etikett för att beskriva syftet eller statusen på indikatorn:
helperText
– Synlig text under progressbaren. Används automatiskt som etikett via aria-labelledby
.aria-label
– En dold etikett för skärmläsare. Används om du inte visar någon synlig helperText
.