How a set of vehicles is reporting right now: how many are in each of the five data states, each count beside its state's dot and word, in one row, for the data views and panels that say how much of what the map shows is live.
When to use
Use ReportStrip to show how a set of vehicles is reporting right now: how many are in each of the five data states, in one row.
| Use instead | When |
|---|---|
| DataStateKey | Each state also needs a sentence on what it means in the app's thresholds |
| VehicleDotLegend | The dots need explaining and nothing is counted |
| Stat | One total or share is shown, such as how many vehicles report live in all |
| Meter | One share is shown within its whole, such as "Reporting live" at "82%" |
Props
| Name | Type | Default | Description |
|---|---|---|---|
counts* | ReportStripCounts | — | How many vehicles are in each data state, such as { live: 1046, ageing: 112, estimated: 30, timetableOnly: 12, noSignal: 4 }. Required. A state left out, null or not a finite number is unknown, and shows "—" and says "Unknown". |
liveLabel | string | The locale's | Overrides "Live", the word beside the live dot; given to that item's VehicleDotLabel |
ageingLabel | string | The locale's | Overrides "Ageing", the word beside the ageing dot; given to that item's VehicleDotLabel |
estimatedLabel | string | The locale's | Overrides "Estimated", the word beside the estimated dot; given to that item's VehicleDotLabel |
timetableOnlyLabel | string | The locale's | Overrides "Timetable only", the word beside the timetable-only dot; given to that item's VehicleDotLabel |
noSignalLabel | string | The locale's | Overrides "No signal", the word beside the no-signal dot; given to that item's VehicleDotLabel |
unknownLabel | string | The locale's | Overrides "Unknown", heard in place of "—" for a count no data gives |
className | string | — | Joined after pn-ReportStrip on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLUListElement> | — | Reaches the root element |
slotProps | { item?: DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | undefined; label?: Omit<VehicleDotLabelProps, "ageingLabel" | "estimatedLabel" | "line" | "liveLabel" | "noSignalLabel" | "render" | "timetableOnlyLabel" | "variant"> | undefined; count?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined; } | — | Props for each part: item, label, count. |
counts (required)ReportStripCounts, default —- How many vehicles are in each data state, such as
{ live: 1046, ageing: 112, estimated: 30, timetableOnly: 12, noSignal: 4 }. Required. A state left out,nullor not a finite number is unknown, and shows "—" and says "Unknown". liveLabelstring, default The locale's- Overrides "Live", the word beside the live dot; given to that item's VehicleDotLabel
ageingLabelstring, default The locale's- Overrides "Ageing", the word beside the ageing dot; given to that item's VehicleDotLabel
estimatedLabelstring, default The locale's- Overrides "Estimated", the word beside the estimated dot; given to that item's VehicleDotLabel
timetableOnlyLabelstring, default The locale's- Overrides "Timetable only", the word beside the timetable-only dot; given to that item's VehicleDotLabel
noSignalLabelstring, default The locale's- Overrides "No signal", the word beside the no-signal dot; given to that item's VehicleDotLabel
unknownLabelstring, default The locale's- Overrides "Unknown", heard in place of "—" for a count no data gives
classNamestring, default —- Joined after
pn-ReportStripon the root styleCSSProperties, default —- Reaches the root
refRef<HTMLUListElement>, default —- Reaches the root element
slotProps{ item?: DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | undefined; label?: Omit<VehicleDotLabelProps, "ageingLabel" | "estimatedLabel" | "line" | "liveLabel" | "noSignalLabel" | "render" | "timetableOnlyLabel" | "variant"> | undefined; count?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined; }, default —- Props for each part:
item,label,count.
Use it
import { ReportStrip } from '@mylder/perron/patterns'Ask your agent
search_docs({ query: "ReportStrip" })Keyboard and ARIA
ReportStrip has no keys of its own and nothing in it is focusable: it is read, not operated.
| Key | Does | From |
|---|---|---|
Tab | Passes the strip by to the next focusable element: it has no tab stop (CR-10) | 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-11) | Its number of items, from the <ul> |
item | listitem, from the native <li> | Its text, in order: the state's word, then its count or "Unknown" | None |
label | None: VehicleDotLabel's generic <span> | Not named; its word is read in place | None |
The dot inside label | hidden: VehicleDot's img, with aria-hidden="true" | None: the word beside it names the state (VehicleDotLabel's CR-2) | None |
count | None: a generic <span> | Not named; its digits are read in place | None |
The "—" in count, when unknown | hidden: aria-hidden="true" | Not read | None |
The words in count, when unknown | Text, in VisuallyHidden | The owned string "Unknown", or unknownLabel | None |
An item reads "Live 1 046", and one with no count "No signal Unknown".
The root is a list with no name of its own and no live region; a caller where the strip stands alone names it with aria-label or aria-labelledby, which reach the root with the rest props: its five words say what it holds, as VehicleDotLegend's list has no name of its own (its CR-7), and a name of its own would be a new owned string in four locales for a list a heading beside it already names; the counts change every few seconds, which would flood a screen reader, and Accessibility asks that only changes of state be announced, in the screen's own polite live region.
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, through VehicleDotLabel; each count is read after its word, and an unknown one as "Unknown" in place of the hidden "—" (CR-5). No colour carries meaning: the dots are one ink, the text's (CR-3), and no signal's grey comes with its cut and its word.
- Every landmark and named region has an accessible name: none here; the strip is a list, not a landmark or region, and a caller where it stands alone names it with
aria-labeloraria-labelledby(CR-11). - Every default label can be overridden:
liveLabel,ageingLabel,estimatedLabel,timetableOnlyLabel,noSignalLabelandunknownLabel. - Every shape the type accepts renders, in every variant:
countswith all five states, with some left out,null,NaNandInfinity(unknown), with0(a count) and with a count past a thousand (grouped); every*Labelstring replaces only its own state's word, and an undefined one keeps the locale's. ReportStrip takes noReactNode. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; nothing animates or collapses. The dots and an unknown count's "—" arearia-hiddenbecause words beside them say them, not for animation. - Native semantics first: a
<ul>of<li>s, each with a VehicleDotLabel and a<span>of digits; no ARIA of the pattern's own beyond the "—"'saria-hidden. - Focus moves in reading order and returns on close: nothing takes focus or opens; Tab passes the strip by.
- Every target is at least
size.target-minsquare: no target; nothing in the strip is pressed. - Loops stop when the system asks for less motion: none here; nothing moves, and a count changes its text without a transition.
Owned strings
ReportStrip owns no new string: every word it shows or announces is a key packages/perron/src/locale/en.ts already has, the five state words VehicleDotLabel shows and the "Unknown" Stat added, and the counts are digits, which expectOwnedStrings passes.
| 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 |
unknown | Unknown | unknownLabel | A count whose state is unknown: heard in place of the aria-hidden "—" (CR-5) |
Do and don't
For a caller using the pattern, 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 | must | Work out each vehicle's state from its report's age with the app's thresholds, by default vehicle-dot.live-threshold and vehicle-dot.ageing-threshold, then count | Count a vehicle as live because it is on the map: the strip would claim more than the data knows | review |
| DD-2 | must | Leave a state's count out, or pass null, when the data doesn't say it, so the strip shows "—" and says "Unknown" | Pass 0 for a count the data doesn't know: 0 says no vehicle is in that state | review |
| DD-3 | must | Name the strip with a heading beside it and aria-labelledby, such as one per operator under "Reporting live, by operator" | Pass aria-hidden to the strip: the eye reads its words and counts, so the ear gets them too | review |
| DD-4 | must | Show a total or a share beside the strip in a Stat | Add a sixth item or a total inside the list through slotProps: the strip holds the five states and nothing else | review |
| DD-5 | must | Use VehicleDotLegend where the dots need explaining and nothing is counted | Use the strip as a legend with made-up counts: a count is a claim about the vehicles | review |
| DD-6 | must | Put the strip in a DataStatePanel while its counts load | Show five unknown counts while the data loads: the panel says it is loading, the strip says the data doesn't know | review |
| DD-7 | must | Announce a change of state, such as a feed going silent, in the screen's own polite live region | Make the strip a live region: its counts change every few seconds and would flood a screen reader | review |