Departure Card
5.4.4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
| Namn | Typ | Beskrivning |
|---|---|---|
active | boolean | Indicates if the card is active. |
arrivalDate * | Date | The arrival date of the train. |
availability | "available" |
DepartureCardUnavailableReasons |
"AVAILABLE" | Availability status of the departure. |
badgeColor | StatusCircleColor | Badge color, must be used with badgeLabel. |
badgeLabel | string | Badge text, must be used with badgeColor. |
captionColor | "textPrimary" |
"highlighted" | Color for the caption text and icon. |
captionIcon | "moon" | Icon for the caption. |
captionSrText | string | Screen reader text for the caption, replaces visible text. |
captionText | string | Text for the caption. |
children | ReactNode | Children elements of the component. |
className | string | Override or extend the styles applied to the component. |
ClickableCardProps | ClickableCardProps | Props for clickable card. |
comfortAvailabilities | ComfortAvailability[] | Comfort availabilities, should be used with hasComfortAvailabilities. |
customAttribute | { attribute: string; value: string |
number } | Custom attribute for testing, subcomponents will get suffixed with "-[ComponentName]". |
departureDate * | Date | The departure date of the train. |
disabled | boolean | If true, the component is disabled. |
disabledPrice | boolean | If the price object should be shown as disabled. |
duration | DurationType | Duration type. |
elevation | number | Elevation of the card. |
hasComfortAvailabilities | boolean | Indicates if comfort availabilities are present, should be used with comfortAvailabilities. |
id | string | Unique identifier for the card. |
isLoadingPrice | boolean | Indicates if the price is loading. |
lang | InputLanguage | Language used for internal translations. |
limitClickArea | boolean | If true, any children passed to the card will be rendered after of the <button> element in the DOM and not part of the click area. This is needed for accessibility purposes when rendering interactive elements inside the card, like an Accordion. |
onClick * | () => void | OnClick handler |
priceText | string | Text shown under the price. |
priceTextType | "secondary" |
"standard" |
"lowPrice" | Type of price text, changes the color of the price text. |
secondaryPriceText | string | Text shown under the price. |
secondaryPriceTextType | "secondary" |
"standard" |
"lowPrice" | Type of secondary price text, changes the color of the secondary price text. |
showPoints * | boolean | Determines whether the points should be displayed. |
showPrice * | boolean | Determines whether the price should be displayed. |
size | "small" |
"medium" |
"large" | Fixed size of the card, takes precedence over breakpoints. |
timeLabelTypographyElement | ElementType | HTML element type for the time label, e.g., h1, h3, h4. |
timeZone | string | Timezone for the date, must be added for data from fagus. |
translation | DepartureCardTranslations | Translations for the departure card. |
transportations * | TransportationType[] | Types of transportations. |
transportInformations | TransportInformationType[] | Information about the transport. |
npm install @sj-ab/component-library.ui.departure-cardDeparture Card är en av våra allra viktigaste komponenter. Den förmedlar mycket information som måste vara tydlig och lättförståelig för alla användare, oavsett förmåga, vana eller tekniska hjälpmedel.
Semantik
Departure Card presenteras för användaren som en knapp (<button type="button">).
Användare med tangentbord får ett enda tabbsteg per Departure Card.
Användare med touchbaserade skärmläsare, som till exempel VoiceOver på iOS, kan navigera mellan Departure Cards med ett enda "swipe" framåt eller bakåt.
Tillgängligt namn
Departure Card har en anpassad uppläsning för skärmläsare . All synlig text och alla ikoner döljs med aria-hidden="true" och ersätts av en visuellt dold text genom den inbyggda underkomponenten <ScreenReaderOnlyDepartureCard />.
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å.
Departure Card som den läses upp av skärmläsare.
"11:03 - 16:24" ersätts av "Avgår 11:03, ankommer 16:24"
"Fr. 1195:-" ersätts av "Pris från 1195 svenska kronor"
"1 kl, 2kl, 2kl lugn" ersätts av "Tillgängliga resklasser: 1 klass, 2 klass, 2 klass lugn"
"Restid 1:10 h, 0 byten" ersätts av "Restid 1 timmar och 10 minuter, inga byten"
Serviceikoner ersätts av "Har Wifi, bistro och rullstolslyft"
Tågbild och koncept ersätts av "Körs med SJ Regional tåg 40 "
Punkt och komma för att skapa pauser och rytm i uppläsningen
Alla utvecklare som uppdaterar Departure Card ansvarar för att också uppdatera uppläsningen i <ScreenReaderOnlyDepartureCard />!
200% textförstoring
Departure Card har inbyggt stöd för textförstoring upp till 200% på alla skärmstorlekar. När det blir ont om plats kommer priset automatiskt att flytta ner och visas underst i kortet.
Det går också att "tvinga" fram en viss responsiv version av Departure Card genom att sätta propen size.
Återkoppling när resan inte är bokningsbar
Ett Departure Card ska aldrig vara helt utgråat eller nedtonat. Om en avgång inte kan väljas av någon anledning så ska användaren alltid kunna klicka på Departure Card och få mer information om varför.
Mer information visas i en Sheet vid klick på kortet.
Nästlade klickbara objekt
Om utvecklare i undantagsfall vill lägga in ett annat klickbart objekt inuti Departure Card, till exempel en <Accordion>, så måste de använda attributet limitedClickArea.
Då kommer det klickbara objektet hamna direkt efter knappen i DOM-strukturen och vi undviker tillgänglighetsproblemen vi annars fått av "knapp i knapp".
- Enter eller MellanslagActivate the Departure Card
Importer av Departure Card
Repos med Departure Card
Senaste installerade version av Departure Card
Äldsta installerade version av Departure Card