Station Picker
The Station Picker is a text field enhanced by a panel of suggested stations. The value must be chosen from a predefined set of allowed stations.
Namn | Typ | Beskrivning |
---|---|---|
ariaLabel | string | Aria label attribute for enhanced accessibility. |
autoSelectionValue | string | Preselects a station in the autocomplete if it matches this value. |
children | React.ReactNode | The children of the station picker. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslations | DeepPartial | Custom translations for the station picker. |
debugRenderNumStations | number | Number of stations to render in the autocomplete drawer for debugging purposes. |
disabled | boolean | If true, the component is disabled. |
errorMessage * | string | The error message to display. |
id * | string | The id of the station picker. |
inputRef * | React.RefObject | Reference to the input (text field) element |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
label | string | The label text. |
lang | "en" |
"sv" | Language used for internal translations. |
onBlur | (event: React.FocusEvent) => void | Function called when the input field loses focus. |
onChange * | (item: SelectedItemProps) => void | Function called on text field input change. |
onSelect | (item: SelectedItemProps) => void | Function called when a station option is selected. |
onStationsSwapped | () => void | Function called when the station swap button is clicked. |
placeholder * | string | Placeholder text for the input field. |
showStationNumber | boolean | Whether to show station numbers alongside station names. |
showStationsNearMe | boolean | Whether to show nearby stations based on user's location. |
stations | StationProps[] | Sorted stations list to select between. Fetch this stations prio index list in your app to sort with: Existing: https://www.sj.se/content/dam/design-material/kb/stations-prio-index-existing.json Fagus: https://www.sj.se/content/dam/design-material/kb/stations-prio-index-fagus.json |
swapIcon | React.FC | The icon to show if onStationsSwapped is true |
titleComponent | "h1" |
"h2" |
"h3" |
"h4" |
"h5" |
"h6" | Semantic heading level for sections like 'popular stations' or 'stations near me'. |
transitionType | "slide" |
"fade" | Type of animation for opening and closing the mobile drawer. |
useInlineSwapIcon | boolean | Displays the swap icon inline when set to true. |
value * | string | Current value of the search input. |
npm install @sj-ab/component-library.ui.station-picker
Responsivitet
Station Picker har olika beteende på stora respektive små skärmar:
Små skärmar
På små skärmar är "Från" respektive "Till" knappar som öppnar stationsväljaren i en helskärmsmodal.
Användaren trycker på knappen, söker efter sin station i textfältet inne i modalen, och flyttas sedan tillbaka till knappen när valet är gjort. Detta skapar ett tydligare flöde där användaren kan fokusera på en uppgift i taget.
Stora skärmar
På stora skärmar är "Från" och "Till" två textfält med automatiska sökförslag. När användaren börjar skriva ett stationsnamn visas förslag i en popup nedanför fältet. Användaren kan klicka på ett förslag med musen eller aktivera det med tangentbordet.
Elevation
Adaptive design
WAI-ARIA
Station Picker strävar efter att följa designmönstren
från WAI-ARIA Authoring Practices Guide.
Station Picker använder bland annat:
role="combobox"
för att indikera att textfältet har valbara förslagrole="listbox"
för panelen med förslagrole="option"
för varje sökförslagrole="group"
för att gruppera relaterade förslagaria-describedby
för att ge ytterligare instruktioner till skärmläsarearia-autocomplete="list"
för att indikera vilken typ av förslag som erbjudsaria-expanded
för att indikera om förslagen är synliga eller intearia-activedescendant
för att hålla koll på vilket förslag som har skärmläsarfokus.
Stavningsförslag
Station Picker har inbyggda stavningsförslag för att hjälpa användare med skrivsvårigheter. Om användaren skriver in ett stationsnamn som inte finns ges istället förslag på liknande stationer.
Stavningsförslagen är implementerade med en algoritm baserad på Levenshteinavstånd, som jämför användarens sökning med kända stationsnamn.
- Pil nedGå till nästa sökförslag
- Pil uppGå till föregående sökförslag
- ReturVälj markerat sökförslag
- EscapeStäng panelen med förslag
Importer av Station Picker
20Repos med Station Picker
45%Senaste installerade version av Station Picker
4.2.12Äldsta installerade version av Station Picker
4.2.0