DisruptionCard

At rest DisruptionCard is text: it takes no focus and no key does anything. Made a link through render={<a href="…" />} (CR-8) it is one tab stop, with the browser's own keys. Its action is the caller's link or button, one tab stop with its own keys; the card around it stays unfocusable.

The line badges are an unnamed list after a new owned string, "Affected lines", in a VisuallyHidden span inside the header, so a screen reader hears "Affected lines, list, 2 items, M2, M3" rather than two bare names after the kind: the eye reads the badges' place in the card as "these lines are affected", and the ear needs the same in words, as the contract's first checklist line asks. The words are text, not the list's aria-label, because a name replaces the content it names: a card made a link takes its name from its text, and an aria-label on the list would put "Affected lines" in that name in place of "M2" and "M3".

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 kind is SeverityLabel's word as well as its icon and colour; the badges' place in the card is said by "Affected lines", read just before the list, and each badge's colour by its short name, so a card made a link is named with the kind, "Affected lines", every line's short name and the title; with no lines, neither the words nor the list renders and nothing is announced for them. A list of stops cut short says "and 3 more" to the eye and the ear alike, and a stretch says both its ends.
• Every landmark and named region has an accessible name: the card is no landmark by default; a caller who renders it as <article> or <section> names it from its title, through aria-labelledby and slotProps.title.id. The lines list is no region and has no name: its owned string is read just before it.
• Every default label can be overridden: affectedLinesLabel, affectsStopsLabel, stopListEndLabel, moreStopsLabel, betweenStopsLabel, fromTimeLabel, untilTimeLabel and timeRangeLabel, and SeverityLabel's delaysLabel, diversionsLabel, plannedWorksLabel, dataFeedProblemsLabel and serviceNoticeLabel through slotProps.severity.
• Every shape the type accepts renders, in every variant: title and children render a string, an element and a list alike, the title as a <p> holds phrasing content and the sentence as a <div> holds block content too; lines renders none, one and many, wrapping onto new rows; stops renders none, one, two, three and more than three names, and a stretch; time renders a start, an end and both, each a string or an element such as <time>; action renders the caller's element; every severity has its story.
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; the card does not animate. SeverityLabel's icon is aria-hidden because its word speaks for it.
• Native semantics first: a <ul> of <li> for the lines, a <p> for the title made a native h2 to h6 through render, a <div> for the sentence, and a native <a href> when the caller makes the card a link; no ARIA attribute, "Affected lines" being VisuallyHidden text.
• Focus moves in reading order and returns on close: at rest the card takes no focus, and its action, last in the card, is the one tab stop inside it; as a link it is one tab stop in the document's order, and it opens or closes nothing.
• Every target is at least size.target-min square: at rest none but the action, whose size is the caller's component's; as a link the whole card is the target, far larger than size.target-min.
• Loops stop when the system asks for less motion: none here; the card has no motion.

The card shows SeverityLabel's name for its kind, which SeverityLabel owns and reads itself, and adds strings of its own: the words said before the list of lines, and the words around the stops and the time. Every other word comes from the caller, through title, children, lines, the names in stops, the ends of time and action.

The words around the stops and the time are owned strings with {name} placeholders, filled by interpolate (the contract's Words), so each locale puts the names and the times where its grammar needs them. The names a list shows are joined by ", ", as all four languages join a list, and the last by stopListEnd; a list past three names the first two and moreStops counts the rest, always 2 or more, so no locale needs a singular "1 more".

affectedLines joins packages/perron/src/locale/en.ts with the JSDoc "A disruption: said just before the list of lines it affects, heard by screen readers only.", and its Danish, Swedish and Norwegian in da.ts, sv.ts and nb.ts: "Berørte linjer", "Berörda linjer" and "Berørte linjer".

The stops' and the time's strings join them with a JSDoc each that names its placeholders, in Danish, Swedish and Norwegian:

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.