Departure Card
5.8.5
A description of this component is work in progress.
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 | BadgeColor | 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 | "standard" |
"secondary" |
"lowPrice" | Type of price text, changes the color of the price text. |
secondaryPriceText | string | Text shown under the price. |
secondaryPriceTextType | "standard" |
"secondary" |
"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[] | An array of transportation types involved in the journey. |
transportInformations | TransportInformationType[] | An array of onboard amenities and services available during the journey. |
npm install @sj-ab/component-library.ui.departure-card
Departure 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.
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.
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.
Alla utvecklare som uppdaterar Departure Card ansvarar för att också uppdatera uppläsningen i !
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
.
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.
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".
Importer av Departure Card
Repos med Departure Card
Senaste installerade version av Departure Card
Äldsta installerade version av Departure Card