Journey Card
5.2.23
A description of this component is work in progress.
| Namn | Typ | Beskrivning |
|---|---|---|
clickable | boolean | Indicates whether the card is interactive or not. |
headerVariant | "h2" |
"subtitle1" | Specifies the style variant for the header text. |
transportations * | TransportationType[] | An array of transportation types involved in the journey. |
transportationsInformations * | TransportInformationType[] | An array of onboard amenities and services available during the journey. |
npm install @sj-ab/component-library.ui.journey-cardJourney Card finns i två varianter: dels som klickbart kort i form av en <button type="button">, och dels som icke-klickbart statisk information, i form av en <div>. Vilken variant som används bestäms av propen clickable.
När Journey Card inte är klickbar hanteras uppläsningen för skärmläsare av den inre JourneySummary-komponenten inuti kortet.
Men när Journey Card är klickbar får den en anpassad uppläsning för skärmläsare.Kortets synliga innehåll döljs för skärmläsare med aria-hidden="true" och ersätts av en visuellt dold text genom den inbyggda underkomponenten <ScreenReaderOnlyJourneyCard />.
Informationen i skärmläsartexten ska vara helt likvärdig den synliga informationen, men med förklarande ord och skiljetecken för att den ska bli lättare att förstå. Till exempel:
"Biljett för resa: ""Stockholm Centralstation - Göteborg Centralstation" läses upp som "från Stockholm Centralstation till Göteborg centralstation"Tis 23 maj 2023 kl 11:57–14:35" ersätts av "avgår: 23 maj 2023 11:57, ankommer: 14:35"Uppläsningen kan anpassas genom att ändra i translations-objektet.
Alla som uppdaterar JourneyCard ansvarar för att också uppdatera uppläsningen i ScreenReaderOnlyJourneyCard!
Importer av Journey Card
Repos med Journey Card
Senaste installerade version av Journey Card
Äldsta installerade version av Journey Card