The key to the vehicle dots: the five data states, each as its dot's shape beside its word, in the order Data states lists them, for the bottom of the map and for any panel that explains the dots. On a map that shows aircraft, it adds the aircraft glyph beside "Planes" after the states (Map). It gives the words and no figures: the thresholds between live, ageing and no signal are each app's, set from its own feed, and a no-signal dot keeps moving on the timetable from where it was last seen, its cut, not its place, saying the position is a guess (Data states).
When to use
Use VehicleDotLegend as the key to the vehicle dots, wherever the dots appear without their words, such as at the bottom of the map.
| Use instead | When |
|---|---|
| VehicleDotLabel | One vehicle's state shows in a row, its dot beside its word |
| DataStateKey | The key also counts the vehicles in each state and says what each means in the app's thresholds |
| ReportStrip | The row counts how many vehicles are in each state |
On this page
Props
| Name | Type | Default | Description |
|---|---|---|---|
liveLabel | string | The locale's | Overrides "Live", the word shown beside the live dot |
ageingLabel | string | The locale's | Overrides "Ageing", the word shown beside the ageing dot |
estimatedLabel | string | The locale's | Overrides "Estimated", the word shown beside the estimated dot |
timetableOnlyLabel | string | The locale's | Overrides "Timetable only", the word shown beside the timetable-only dot |
noSignalLabel | string | The locale's | Overrides "No signal", the word shown beside the no-signal dot |
aircraftVisible | boolean | false | Adds the aircraft, the aircraft glyph beside "Planes", after the five states, for a map that shows aircraft |
aircraftLabel | string | The locale's | Overrides "Planes", the word shown beside the aircraft glyph when aircraftVisible is set |
className | string | — | Merged after pn-VehicleDotLegend on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLUListElement> | — | Reaches the root |
liveLabelstring, default The locale's- Overrides "Live", the word shown beside the live dot
ageingLabelstring, default The locale's- Overrides "Ageing", the word shown beside the ageing dot
estimatedLabelstring, default The locale's- Overrides "Estimated", the word shown beside the estimated dot
timetableOnlyLabelstring, default The locale's- Overrides "Timetable only", the word shown beside the timetable-only dot
noSignalLabelstring, default The locale's- Overrides "No signal", the word shown beside the no-signal dot
aircraftVisibleboolean, defaultfalse- Adds the aircraft, the
aircraftglyph beside "Planes", after the five states, for a map that shows aircraft aircraftLabelstring, default The locale's- Overrides "Planes", the word shown beside the aircraft glyph when
aircraftVisibleis set classNamestring, default —- Merged after
pn-VehicleDotLegendon the root styleCSSProperties, default —- Reaches the root
refRef<HTMLUListElement>, default —- Reaches the root
Use it
import { VehicleDotLegend } from '@mylder/perron'Ask your agent
search_docs({ query: "VehicleDotLegend" })Keyboard and ARIA
No Base UI part, so nothing from Base UI here: the legend takes no focus and does nothing when pressed.
| Key | Does | From |
|---|---|---|
Tab | Passes the legend by to the next focusable element: it has no tab stop (CR-4) | Perron |
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | list, from the native <ul> | None of its own; the caller's aria-label or aria-labelledby when it gives one (CR-7) | Its number of items, from the <ul> |
item | listitem, from the native <li> | Its text: the label's word | none |
dot | hidden: VehicleDot's img, with aria-hidden="true" passed | none: the word beside it names the state, so the ear hears it once (VehicleDot's CR-6) | none |
aircraft | hidden: an <svg> with aria-hidden="true" and focusable="false" | none: the word beside it, "Planes", names it | none |
label | text | The owned string for its state, 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: each dot's state is told to the ear by the word beside it, which the eye reads too; the dot's shape is what the legend teaches the eye, and the ear, which never meets the shapes, gets the five words in the same order.
- Every landmark and named region has an accessible name: none here; the legend is a list, not a landmark or region, and a caller where it stands alone names it with
aria-labeloraria-labelledby(CR-7). - Every default label can be overridden:
liveLabel,ageingLabel,estimatedLabel,timetableOnlyLabel,noSignalLabelandaircraftLabel. - Every shape the type accepts renders, in every variant: the legend takes no
ReactNode; every*Labelstring replaces only its own item's word, an undefined one keeps the locale's, theDefault,NarrowandForcedColoursstories render all five items, and theAircraftstory the sixth after them. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; nothing animates or collapses. The dots arearia-hiddenbecause their words speak for them, not for animation. - Native semantics first: a
<ul>of<li>s, each with a hidden VehicleDot and a<span>of text; no ARIA beyond the dots'aria-hidden. - Focus moves in reading order and returns on close: the legend takes no focus and opens nothing; Tab passes it by.
- Every target is at least
size.target-minsquare: no target; the legend is not pressed. - Loops stop when the system asks for less motion: none here; the legend has no motion.
Owned strings
Every word the legend shows is its own; the caller gives none. The five states' keys exist in packages/perron/src/locale/en.ts, held to the table in Content design, and VehicleDot already uses them. The legend adds one, aircraft, "Planes": the plural a visitor says for what they see overhead, where the code and the glossary say aircraft.
| Key | English | Override | Seen or heard where |
|---|---|---|---|
live | Live | liveLabel | The first item's label, seen and read as shown |
ageing | Ageing | ageingLabel | The second item's label, seen and read as shown |
estimated | Estimated | estimatedLabel | The third item's label, seen and read as shown |
timetableOnly | Timetable only | timetableOnlyLabel | The fourth item's label, seen and read as shown |
noSignal | No signal | noSignalLabel | The fifth item's label, seen and read as shown |
aircraft | Planes | aircraftLabel | The sixth item's label, with aircraftVisible |
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 | Show the legend wherever vehicle dots appear without their words, such as at the bottom centre of the map | Build a legend of your own from VehicleDots and words: it drifts from the five states' order and words | review |
| DD-2 | must | Keep all five states, even when no vehicle on screen is in one | Hide a state with className or CSS because no vehicle has it: Data states asks for all five | review |
| DD-3 | should | Set aircraftVisible while the map draws aircraft, and leave it off when the screen hides them | Draw a plane of your own beside the legend: it drifts from the glyph the map draws | review |
| DD-4 | should | Put the legend on a glass Surface over the map, or straight on a panel's surface | Expect the legend to bring its own glass, place itself or stack itself over the map | review |
| DD-5 | must | Name the list with aria-label or aria-labelledby where it stands alone, as on the map | Pass aria-hidden to the legend: the eye reads its words, so the ear gets them too | review |
| DD-6 | must | Keep render on the root to another list element, <ol> or a component that renders one | Swap the root for a <div> through render: its <li>s would sit outside a list, which HTML and axe both fail | review |
| DD-7 | must | Override a word with its *Label prop when a screen's copy needs it, and the same prop on the screen's VehicleDots | Change one word on the legend and leave the dots' names, so the eye and the ear are told two names for one state | review |
| DD-8 | must | Explain beside the legend what each state means, where a panel does, in the app's own figures from its thresholds | Write the defaults as fixed facts, such as "Live: under a minute old": an app with a slower feed sets its own live threshold, and the words would disagree with its dots | review |