A vehicle's data state as its dot and its word side by side, such as a solid dot and "Live", for rows, tables and strips that say how fresh a vehicle's data is.
When to use
Use VehicleDotLabel wherever a vehicle's data state is shown in a row, a table or a strip, so its dot and its word always come together.
| Use instead | When |
|---|---|
| VehicleDotLegend | All five states are explained together, as a key |
| ReportStrip | The row counts how many vehicles are in each state |
| SeverityLabel | The label names a kind of disruption on a line, such as a data feed problem |
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'live' | 'ageing' | 'estimated' | 'timetable-only' | 'no-signal' | 'live' | How fresh the vehicle's data is, as Data states names it: the dot's shape and the word beside it. Set on the root as data-variant, and passed to the dot. |
line | 'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional' | — | The vehicle's line, which gives the dot its colour: a metro line (m1 to m4), an S-tog line (a to h), any bus (bus), or any regional or Øresund train (regional). Set on the root as data-line, and passed to the dot. Left out, with no default, neither sets data-line and the dot draws in the word's colour, for a label that stands for a state across many lines. |
liveLabel | string | The locale's | Overrides "Live", the word shown when variant='live' |
ageingLabel | string | The locale's | Overrides "Ageing", the word shown when variant='ageing' |
estimatedLabel | string | The locale's | Overrides "Estimated", the word shown when variant='estimated' |
timetableOnlyLabel | string | The locale's | Overrides "Timetable only", the word shown when variant='timetable-only' |
noSignalLabel | string | The locale's | Overrides "No signal", the word shown when variant='no-signal' |
className | string | — | Merged after pn-VehicleDotLabel on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLSpanElement> | — | Reaches the root |
variant'live' | 'ageing' | 'estimated' | 'timetable-only' | 'no-signal', default'live'- How fresh the vehicle's data is, as Data states names it: the dot's shape and the word beside it. Set on the root as
data-variant, and passed to the dot. line'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional', default —- The vehicle's line, which gives the dot its colour: a metro line (
m1tom4), an S-tog line (atoh), any bus (bus), or any regional or Øresund train (regional). Set on the root asdata-line, and passed to the dot. Left out, with no default, neither setsdata-lineand the dot draws in the word's colour, for a label that stands for a state across many lines. liveLabelstring, default The locale's- Overrides "Live", the word shown when
variant='live' ageingLabelstring, default The locale's- Overrides "Ageing", the word shown when
variant='ageing' estimatedLabelstring, default The locale's- Overrides "Estimated", the word shown when
variant='estimated' timetableOnlyLabelstring, default The locale's- Overrides "Timetable only", the word shown when
variant='timetable-only' noSignalLabelstring, default The locale's- Overrides "No signal", the word shown when
variant='no-signal' classNamestring, default —- Merged after
pn-VehicleDotLabelon the root styleCSSProperties, default —- Reaches the root
refRef<HTMLSpanElement>, default —- Reaches the root
Use it
import { VehicleDotLabel } from '@mylder/perron'Ask your agent
search_docs({ query: "VehicleDotLabel" })Keyboard and ARIA
No Base UI part, so nothing from Base UI here: the label is text, takes no focus and does nothing when pressed. A caller who makes a row interactive puts the label inside a button or link, which takes the focus.
| Key | Does | From |
|---|---|---|
Tab | Passes the label by to the next focusable element: it has no tab stop (CR-6) | Perron |
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | none: a generic <span> | Not named; its text is read in place, as part of the row, cell or strip it sits in | none |
dot | hidden, aria-hidden="true" on its root | Not read: the label beside it says the same (VehicleDot's CR-6) | none |
label | text | The owned string for its variant (live, ageing, estimated, timetableOnly, noSignal), or the caller's *Label | none |
What axe won't catch, from the contract, each with how this component meets it:
- Everything the eye is told, the ear is told, for every shape each prop accepts: the dot's shape says the state, and the
labelsays it in words for everyvariant; the dot isaria-hiddenbecause the word beside it carries the same meaning. The line colour is not named: the caller names the line in words nearby, as Semantic colours asks. - Every landmark and named region has an accessible name: none here; the label is inline text, not a region.
- Every default label can be overridden:
liveLabel,ageingLabel,estimatedLabel,timetableOnlyLabelandnoSignalLabel. - Every shape the type accepts renders, in every variant: every
varianthas its story, and a label with nolinehasNoLine; a*Labelstring replaces only its own state's word, and an undefined one keeps the locale's (CR-4); a long word wraps inside the label in theWrappingstory. VehicleDotLabel takes noReactNode. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; nothing animates or collapses. The dot isaria-hiddenbecause the word speaks for it, not for animation. - Native semantics first: a
<span>holding the dot and a<span>of text, no role, and no ARIA beyond the dot'saria-hidden. - Focus moves in reading order and returns on close: the label takes no focus and opens nothing; Tab passes it by.
- Every target is at least
size.target-minsquare: no target; a pressable vehicle is the caller's button or link around the label, which meets the minimum itself. - Loops stop when the system asks for less motion: none here; the label has no motion.
Owned strings
Every word VehicleDotLabel shows is its own; the caller gives only variant and line. All five keys exist in packages/perron/src/locale/en.ts, held to the table in Content design, and VehicleDot already uses them; VehicleDotLabel adds none.
| Key | English | Override | Seen or heard where |
|---|---|---|---|
live | Live | liveLabel | label when variant='live', seen and read as shown |
ageing | Ageing | ageingLabel | label when variant='ageing', seen and read as shown |
estimated | Estimated | estimatedLabel | label when variant='estimated', seen and read as shown |
timetableOnly | Timetable only | timetableOnlyLabel | label when variant='timetable-only', seen and read as shown |
noSignal | No signal | noSignalLabel | label when variant='no-signal', seen and read as shown |
Do and don't
For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.
| Rule | Level | Do | Don't | Checked by |
|---|---|---|---|---|
| DD-1 | should | Use VehicleDotLabel wherever a vehicle's data state is shown, so its dot and its word always come together | Set a VehicleDot beside your own word for the state: the word could drift from content design's, and be heard twice | review |
| DD-2 | must | Name the line in words nearby, such as in a LineBadge | Let the dot's colour be the only sign of the line: several line colours miss 3:1 on the light surfaces | review |
| DD-3 | must | Put a time beside the label, such as "since 08:02" after "No signal", in your own text | Override a *Label to add the time or to rename a state: the five words are the same on every screen, in every language | review |
| DD-4 | must | Work out the state from the report's age with the app's thresholds, by default vehicle-dot.live-threshold and vehicle-dot.ageing-threshold | Pass live for a vehicle whose last report is minutes old: the label would claim more than the data knows | review |
| DD-5 | should | Use VehicleDotLegend to explain all five states together | Stack VehicleDotLabels as a legend: a legend lists all five states in Data states' order, even one with no vehicles | review |
| DD-6 | must | Wrap the label in a Perron button or link when the rider can open the vehicle | Add onClick or tabIndex to the label: it has no focus ring, role for a control or target size | review |
| DD-7 | must | Use SeverityLabel for a kind of disruption on a line | Use VehicleDotLabel's no signal for a feed problem across a line: that is SeverityLabel's "Data feed problems" | review |