SeverityLabel

SeverityLabel is text: it takes no focus, and no key does anything. render swaps its element for another text element, never a link or button: it is smaller than size.target-min, so the control is the card around it, as Do and don't says.

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 kind, and the label says it in words for every severity; the icon is aria-hidden because the word beside it carries the same meaning. In forced colours the colour goes, and the icon and the word still carry it.
• Every landmark and named region has an accessible name: none here; SeverityLabel is inline text.
• Every default label can be overridden: delaysLabel, diversionsLabel, plannedWorksLabel, dataFeedProblemsLabel and serviceNoticeLabel.
• Every shape the type accepts renders, in every variant: severity is one of five strings, and each has its story; a *Label string replaces only its own kind's word, and an undefined one keeps the locale's (CR-5).
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; SeverityLabel does not animate. The icon is aria-hidden because the word speaks for it, not for animation.
• Native semantics first: a <span> with a <span> of text and an <svg>, no role, and no ARIA beyond aria-hidden and focusable="false" on the icon.
• Focus moves in reading order and returns on close: SeverityLabel takes no focus.
• Every target is at least size.target-min square: no target; SeverityLabel is not pressed.
• Loops stop when the system asks for less motion: none here; SeverityLabel has no motion.

Every word SeverityLabel shows is its own; the caller gives only severity. The names are the kinds of disruption as packages/perron/icons/icons.json and Data states name them, set in sentence case.

The five names are "Delays", "Diversions", "Planned works", "Data feed problems" and "Service notice": the names the icons and the tokens already give, plural as names of a kind rather than of one event, but for "Service notice", which names what each such message is, as Rejseplanen's own messages do. They reuse the existing delays key, its JSDoc widened to "A line's delays: a heading, and the name of the delay kind of disruption", and add diversions, plannedWorks, dataFeedProblems and serviceNotice. All five join the data-state, delay and disruption words table of docs/content-design.md, so every screen names a disruption the same way in all four languages: "Service notice" is "Driftsmeddelelse", "Trafikmeddelande" and "Driftsmelding".

Each new key gets a JSDoc line like its neighbours in packages/perron/src/locale/en.ts, and its Danish, Swedish and Norwegian in da.ts, sv.ts and nb.ts.

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.