TopBar

TopBar has no keys of its own. Tab moves through what the bar holds in the order it shows, which is the DOM order (CR-3): the brand's link when brandHref is given, then each chip in filters and then each control in tools in a medium bar, or the tools and then the filters in a small one. A responsive bar keeps the medium order in the DOM at both widths; under breakpoint.phone, a browser that follows reading-flow tabs in the order on screen, the tools and then the filters, as a small bar does, and one without it, iOS Safari among them, follows the DOM, the filters on the second row before the tools on the first, away from the order on screen; the groups don't depend on each other, and one DOM order must differ from the screen at one width (CR-16). The chips, buttons and links answer their own keys, Enter and Space, as their specs say.

The filters' name is an aria-label on the fieldset, not a legend, as Mylder's composition names it: a legend renders on the fieldset's edge outside its flex row, and the VisuallyHidden part that would hide one is a span.

The status line is no live region: its time changes on every refresh, which would flood a screen reader, and Accessibility asks that only changes of state be announced, in the screen's own polite live region, as SourceLine's line is 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 brand is heard as "Mylder" in both of Brand's variants and as a link with brandHref; the status line is its own text, "Paused · Updated 08:14:05" or "Updated 08:09:40, may be out of date", so the paused and out-of-date states are words, not only inks; the filters group is named, and each chip says its count and its pressed state itself. The unknown time's "—" is text, read as the screen reader names it.
• Every landmark and named region has an accessible name: the root is not a landmark, and the screen that wraps it in a header has its banner; the filters group is named "Filters", or by filtersLabel.
• Every default label can be overridden: updatedLabel, updatedOutOfDateLabel, sourcePausedLabel, filtersLabel and brandNameLabel.
• Every shape the type accepts renders, in every variant: filters and tools render a string, an element, a fragment and a list alike, and render no group for null, false or an empty list; time given as HH:MM:SS, as HH:MM and left out; paused and outOfDate alone and together; every size, responsive at both widths. TopBar.test.tsx renders each shape of filters and tools.
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses.
• Native semantics first: a fieldset for the filters, a time for the time, an <a href> for the brand's link, plain div and span for the rest, and no ARIA of the pattern's own but the group's aria-label.
• Focus moves in reading order and returns on close: the DOM order is the order on screen with size medium and small (CR-3), and with responsive above breakpoint.phone; under it, reading-flow brings Tab to the order on screen in a browser that follows it. A browser without reading-flow, iOS Safari among them, moves focus on a phone from the brand to the filters on the second row and then up to the tools on the first, away from the order on screen. That is accepted: one DOM order must differ from the screen at one of the two widths, and the groups don't depend on each other, so meeting the filters first changes no meaning and loses no control (CR-16). Nothing in the bar opens or closes.
• Every target is at least size.target-min square: the brand's link keeps Brand's size.target-min height; the chips and buttons the stories put in the bar are size.control and size.button-sm tall.
• Loops stop when the system asks for less motion: none here; nothing moves, and the time changes its text without a transition.

Three new keys, in packages/perron/src/locale/en.ts and the Danish, Swedish and Norwegian dictionaries, which agents write, and three reused. The two phrases wrap the caller's time, so each is one string with a {time} placeholder, filled by interpolate, and its override takes the same placeholder (the contract's Words). They start in sentence case, "Updated", since each starts the line, where SourceLine's lower-case "updated" sits after a source's name.

The new keys are topBarUpdated "Updated {time}", topBarUpdatedOutOfDate "Updated {time}, may be out of date" and topBarFilters "Filters", scoped to the pattern as SourceLine scopes its own, with SourceLine's sourcePaused reused for "Paused" and Brand's brandName for the brand. The words are the ticket's ("Updated 08:14:05") and SourceLine's, in sentence case for the start of a line; a key the dictionary has is reused, as the contract asks; "Filters" names the group by what it holds on any screen, and Mylder, whose filters are its modes, gives "Modes" through filtersLabel.

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.