Intro
Tidslinjen gir en visuell oversikt over perioder i kronologisk rekkefølge. Periodene kan gjøres klikkbare, slik at du kan vise utfyllende informasjon. Tidslinjen fungerer ikke på mobil, og skal bare brukes på interne flater.
Eksempler
Lar deg "zoome" til predefinerte tidsperioder. Bruk 'startDate/endDate'-prop i Timeline for å justere hvilken tidsperiode som blir vist.
Vi anbefaler å bruke 'aria-controls' begge veier mellom aktive perioder og panelet det refererer til. Dette gir brukere av enkelte skjermlesere hurtigtaster for å hoppe mellom perioder og panelet.
Retningslinjer
Bruk av ikoner og farger
Bruk ikon, som eksemplene viser, for å kommunisere type periode. Komponenten kommer med 5 innebygde statuser som bestemmer farge og tilgjengelig tekst:
| Status | Farge | Tilgjengelig tekst |
|---|---|---|
| success | --a-surface-success-subtle | Suksess fra ${start} til ${end} |
| warning | --a-surface-warning-subtle | Advarsel fra ${start} til ${end} |
| danger | --a-surface-danger-subtle | Fare fra ${start} til ${end} |
| info | --a-surface-info-subtle | Info fra ${start} til ${end} |
| neutral | --a-bg-subtle | Nøytral fra ${start} til ${end} |
Du kan overskrive statusen i den tilgjengelige teksten ved å bruke av propen statusLabel.
Minimum bredde
Avhengig av dato-oppløsning (startDate/endDate) og antall perioder vil komponenten kreve en viss bredde for at innholdet skal komme tydelig frem. Vær forsiktig med å legge inn for mange perioder, og vurder å legge til horisontal stegvis skroll.
Tilgjengelighet
Tidslinjen er kodet med WAI ARIA for å fungere med skjermleser. Vær forsiktig med å endre altfor mye funksjonelt da tidslinjen løser en veldig konkret oppgave og ikke så mye mer.
Mulige utfordringer med WCAG
Vær oppmerksom på at komponenten ikke er responsiv.
Tastaturinteraksjon
Dersom tidslinjen har interaktive elementer som knapper må disse kunne nås med bruk av tastatur. Mulighet for ArrowUp/Down er lagt til for å lettere kunne navigere seg gjennom Tidslinjen uten å tabbe gjennom alle periodene.
| Kommando | Interaksjon |
|---|---|
| Enter | Skjul/vis popover |
| Space | Aktiver |
| ArrowUp | Flytter fokus til første fokuserbare element på raden over |
| ArrowDown | Flytter fokus til første fokuserbare element på raden under |
Interaksjon med skjermleser
Hvis aria-controls er satt på en periode i tidslinja og panelet, kan de som bruker Jaws hoppe fram/tilbake med hurtigtasten Alt+Jaws+m. Jaws er enten Insert eller CapsLock, avhengig av hvilket tastaturoppsett som er valgt i Jaws.
Props
Timeline
startDate?
- Type:
Date - Description:
endDate?
- Type:
Date - Description:
direction?
- Type:
"left" | "right" - Default:"left"
- Description:
axisLabelTemplates?
- Type:
AxisLabelTemplates - Description:
className?
- Type:
string
Timeline.Row
label
- Type:
string - Description:
headingTag?
- Type:
"h2" | "h3" | "h4" | "h5" | "h6" - Default:"h3"
- Description:
icon?
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLOListElement> - Description:
Timeline.Period
start
- Type:
Date - Description:
end
- Type:
Date - Description:
icon?
- Type:
ReactNode - Description:
status?
- Type:
"success" | "warning" | "danger" | "info" | "neutral" - Default:"neutral"
- Description:
statusLabel?
- Type:
string - Description:
onSelectPeriod?
- Type:
((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void) - Description:
children?
- Type:
ReactNode - Description:
isActive?
- Type:
boolean - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement | HTMLButtonElement> - Description:
Timeline.Pin
date
- Type:
Date - Description:
children?
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
Timeline.Zoom
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLUListElement> - Description:
Timeline.Zoom.Button
label
- Type:
string - Description:
interval
- Type:
"month" | "year" - Description:
count
- Type:
number - Description:
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description: