VehicleTable

No Base UI part, so nothing from Base UI here: the rows are read, not operated. They take no focus, and no key does anything of their own (CR-7). In a sortable table each header's sortButton is a native button, one tab stop each, in column order, pressed with Enter or Space as any button is (CR-10). A screen reader's table keys, which move from cell to cell, are the screen reader's.

The row headers are what a screen reader adds to a cell as it moves through a column: moving down the delay column, it reads "5C, Husum Torv, Delay, On time", the row headers and the column header before the cell: each delay is heard with the vehicle it belongs to. A header's sort is heard from its aria-sort, which screen readers read with the column header, "Delay, sorted descending"; the arrow beside the words is hidden, since aria-sort says the same, and a sortable column not sorted says none, which the button's role already tells apart from a header that cannot sort.

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 line's colour is named by lineName, read from the badge; the dot's shape by the state's word beside it, the dot aria-hidden (VehicleDotLabel's CR-2); the delay's figure and colour by Delay's words, and an unknown one's "—" by "Delay unknown" (CR-4); an unknown last-seen time's "—" by "Unknown" (CR-11); the sorted column's arrow and ink by its header's aria-sort (CR-10); each column's meaning by its header, which a screen reader reads with each cell.
• Every landmark and named region has an accessible name: the table is not a landmark; it takes its name from the caller, through aria-label or aria-labelledby on the root, and has none of its own (CR-5): every story names it with aria-label, and Default's play names one from a heading through aria-labelledby, as Do and don't asks of a screen.
• Every default label can be overridden: lineColumnLabel, destinationColumnLabel, positionColumnLabel, delayColumnLabel, lastSeenColumnLabel, unknownLabel, the five state labels from liveLabel to noSignalLabel, and Delay's five, minutesUnitLabel, minutesLateLabel, minutesEarlyLabel, onTimeLabel and delayUnknownLabel.
• Every shape the type accepts renders, in every variant: lineName and destination render a string, an element and a list alike; vehicles renders empty, with one vehicle and with many; delay a number, null and left out, in every variant (CR-4); lastSeen a time and left out (CR-11); sort each column and direction, null and left out, with and without onSortChange (CR-10); a long destination wraps inside its column (CR-8).
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses. The dot and the delay's figure are aria-hidden inside their components because words say them, not for animation.
• Native semantics first: a native <table>, <thead>, <tbody>, <tr>, <th scope>, <td>, <time> and, for a sortable header, <button>, whose roles no CSS display overrides (CR-1); the one ARIA of the table's own is aria-sort, which no element says.
• Focus moves in reading order and returns on close: the rows take no focus and the table opens nothing; a sortable table's header buttons are reached in column order, then a caller's link in a destination in row order, its DOM order.
• Every target is at least size.target-min square: a header's sortButton fills its cell and is at least size.target-min tall and wide (CR-10); the rows have no target of their own (CR-7); a caller's link in a destination is typography.label text in a row at least size.vehicle-row tall, with that much room around it.
• Loops stop when the system asks for less motion: none here; nothing moves. A vehicle whose data changes is new props from the screen, not an animation.

The line's name and the destination are the caller's data, and so is the table's accessible name (see Props); the column headers are the table's own, and the state's words and the delay's are VehicleDotLabel's and Delay's, overridable here through the props above.

The table adds five owned strings for its column headers, lineColumn "Line", destinationColumn "Destination", positionColumn "Position", lastSeenColumn "Last seen" and delayColumn "Delay", outside content design's table, and says the existing unknown, "Unknown", for a last-seen time no one gave. No key in packages/perron/src/locale/en.ts says any of them: delays, "Delays", is the heading of a line's delays and the name of a kind of disruption, plural, not a column's name. "Position" names what the five data states measure, how fresh a vehicle's reported position is, in a word a rider knows, where "Data state" is the system's own term; and the five are a table's headers rather than data-state, delay or disruption words, as DepartureRow's "Now" and StopTimeline's "Next stop" stayed out of content design's table. "Last seen" is the words Data states uses of a no-signal vehicle, which keeps moving on the timetable "from where it was last seen", for the time that state is measured from. A sorted header adds no words: its state is aria-sort's, which the screen reader says in its own language.

The five new keys join en.ts, each with a JSDoc line such as "A vehicle table: the header of the column of each vehicle's line.", and their Danish, Swedish and Norwegian join da.ts, sv.ts and nb.ts: "Last seen" is "Sidst set", "Senast sedd" and "Sist sett". unknown's JSDoc names VehicleTable among the components that say it.

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.