The good news about a line: a mark and the words "Running normally" in the success colour, set where a line's disruptions would be listed, such as a line's detail panel or a row in a list of lines, when the line has none.
When to use
Use NormalService where a line's disruptions would be listed, such as a line's detail panel or a row in a list of lines, when the line has none.
| Use instead | When |
|---|---|
| SeverityLabel | The line has a disruption, named by its kind |
| Delay | One vehicle or departure keeps to the timetable: "On time" |
| EmptyState | A list or panel has nothing to show because the data is missing |
Kongens Nytorv
Metro M1, M2 and M3.
Props
| Name | Type | Default | Description |
|---|---|---|---|
runningNormallyLabel | string | The locale's | Overrides "Running normally", the words shown and read |
ref | Ref<HTMLSpanElement> | — | Reaches the root element |
runningNormallyLabelstring, default The locale's- Overrides "Running normally", the words shown and read
refRef<HTMLSpanElement>, default —- Reaches the root element
Use it
import { NormalService } from '@mylder/perron'Ask your agent
search_docs({ query: "NormalService" })Keyboard and ARIA
NormalService is text: it takes no focus, and no key does anything. It is not a control: a caller who needs a link or button puts NormalService inside their own, and that element brings its own keys and a target of at least size.target-min.
| Key | Does | From |
|---|---|---|
| none | NormalService is not focusable or operable | 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 panel or row it sits in | none |
icon | hidden, aria-hidden="true" | Not read: the label beside it says the same | none |
label | text | The owned string runningNormally, "Running normally", or the caller's runningNormallyLabel | 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 colour and the icon say the line is well, and the
labelsays it in words; the icon isaria-hiddenbecause the words beside it carry the same meaning. In forced colours the colour goes, and the icon and the words still carry it. - Every landmark and named region has an accessible name: none here; NormalService is inline text.
- Every default label can be overridden:
runningNormallyLabel. - Every shape the type accepts renders, in every variant: the one prop of its own is a string; an undefined
runningNormallyLabelkeeps the locale's words, and an empty string is the caller's to avoid (CR-4). - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; NormalService does not animate. The icon isaria-hiddenbecause the words speak for it, not for animation. - Native semantics first: a
<span>with a<span>of text and an<svg>, no role, and no ARIA beyondaria-hiddenandfocusable="false"on the icon. - Focus moves in reading order and returns on close: NormalService takes no focus.
- Every target is at least
size.target-minsquare: no target; NormalService is not pressed. - Loops stop when the system asks for less motion: none here; NormalService has no motion.
Owned strings
Every word NormalService shows is its own. It reuses the key en.ts already has, runningNormally, whose JSDoc is "A line with no delays or disruptions.", and which Content design already gives in the other three languages: "Kører normalt", "Går som vanligt" and "Går som normalt".
| Key | English | Override | Seen or heard where |
|---|---|---|---|
runningNormally | "Running normally" | runningNormallyLabel | label, seen and read as shown; the key en.ts has |
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 | must | Show NormalService where a line's disruptions would be, when it has none, so a rider sees the answer and not a gap. | Show an empty list, or EmptyState's "No data to show": no disruptions is news about the line, not missing data. | review |
| DD-2 | should | Name the line beside it, in a heading, a LineBadge or a row, so "Running normally" says which line. | Pass the line's name through runningNormallyLabel ("M2 running normally"): the label overrides the content-design words, not adds to them. | review |
| DD-3 | must | Use SeverityLabel for each kind of disruption, and NormalService only when there are none. | Show NormalService beside a SeverityLabel on the same line: a line is either disrupted or running normally. | review |
| DD-4 | must | Use Delay's "On time" for one vehicle or departure keeping to the timetable. | Use NormalService for one vehicle: it says a whole line has no delays or disruptions. | review |
| DD-5 | must | Make the whole row or panel the link, with the label inside it. | Make NormalService itself a control through render: it is a label, smaller than size.target-min, and has no pressed state. | review |