DetailHeader

DetailHeader has no keys of its own and is never focusable. The controls in action follow the title in the DOM and on screen, so Tab reaches them in reading order.

• The title is always an h2, with an id the caller can set through slotProps.title (React's useId otherwise), so DetailPanel can name its Sheet with aria-labelledby pointing at it: the header heads one panel over a page whose own heading is the h1, and with no render a pattern can't swap the level.
• In the line variant the mark is aria-hidden and the title starts with lineName in a VisuallyHidden span and a space, so the heading, and the panel name taken from it, reads "5C Husum Torv" rather than "Husum Torv" with the badge read apart before it: a screen reader moving by headings, and the panel's name, then carry the line, and the badge is read once.

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 badge's line name is read in the title (CR-4), and the StationIcon is decorative beside the stop's name, which the title says; the line's colour is never the only sign of the line.
• Every landmark and named region has an accessible name: none here, the root is not a landmark; the title's id lets DetailPanel name its panel from the heading (CR-5).
• Every default label can be overridden: none here; DetailHeader owns no string.
• Every shape the type accepts renders, in every variant: title, lineName, subheader and action each render a string, an element and a list alike; subheader and action are divs, so block content is valid there, and the title takes phrasing content as an h2 does.
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses. The mark is aria-hidden because the title repeats it, not for animation.
• Native semantics first: an h2 for the title, plain divs for the rest, and the caller's own button or a href in the action; no ARIA but aria-hidden on the mark.
• Focus moves in reading order and returns on close: the action follows the title and subheader in the DOM and on screen; DetailHeader never moves focus, and the Sheet around it returns focus on close.
• Every target is at least size.target-min square: DetailHeader has no target of its own; the action's controls keep their own sizes, size.control for an icon button.
• Loops stop when the system asks for less motion: none here; nothing moves.

No owned strings: every word DetailHeader shows or announces comes from the caller, through lineName, title, subheader and action, and the panel's close label belongs to the Sheet's close button, which DetailPanel sets after the header, not in action.

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.