SearchField

From the Base UI reference for Field and Autocomplete, and the installed AriaCombobox, ComboboxInput, ComboboxClear, ComboboxList and ComboboxEmpty that Autocomplete re-exports. "From" says who does it.

Base UI's known exceptions. While the list is open, Base UI 1.9.0 adds two <span role="button" aria-label="Dismiss"> controls, from ComboboxInput and ComboboxPopup, that a screen reader can activate to close the list, named in hard-coded English that no owned string or *Label prop reaches; and its modal focus manager sets aria-hidden on everything outside the input, the popup and those controls, the label and the clear button included, until the list closes. SearchField keeps Base UI's behaviour and neither hides nor relabels them: the input stays named by the label through aria-labelledby, which reads hidden text; Esc and the arrow keys stay the field's keys; and both controls sit outside the popup, so the open list's owned-strings check never sees them. The Open story asserts them, and a Direction finding asks Base UI for a label prop.

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 search icon is aria-hidden beside a field the label names; the clear button's aria-hidden cross has the owned "Clear" as its text; a hidden label is still the input's and the list's name; "No matches" is announced as it appears; a row reads its label, its description and its start icon's own text, as a StationIcon or a LineBadge gives one. Base UI's known exceptions, which the Open story asserts: while the list is open, its modal focus manager hides the label and the clear button from the ear, the input keeping its name, and its two Dismiss controls are heard in its own English.
• Every landmark and named region has an accessible name: none here; SearchField is not a landmark, and a caller puts it in a <search> element when it is the screen's search (see Do and don't).
• Every default label can be overridden: clearLabel and noMatchesLabel. Base UI's two Dismiss controls are its known exception: no prop reaches their hard-coded English.
• Every shape the type accepts renders, in every variant: label, an item's description and its startIcon render a string, an element and a list alike; a long Danish compound wraps in the label, the rows and the empty message (CR-11).
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; the closed list renders nothing, and the clear button is unmounted while the box is empty.
• Native semantics first: a native <label> and <input>, a native <button> for the clear button, and Base UI's combobox, listbox, option and status roles; Perron adds only the listbox's aria-labelledby. Base UI's Dismiss controls are <span role="button">s, its known exception.
• Focus moves in reading order and returns on close: the label, then the input, are the field's one tab stop; the highlight in the list is virtual, so focus never leaves the input, and closing the list, choosing a row or pressing the clear button leaves it there.
• Every target is at least size.target-min square: the clear button, size.control (34 px) square; a row, at least size.target-min tall and as wide as the list; the input, size.input tall. Base UI's Dismiss controls are screen-reader-only, with no box to press, and take no tab stop.
• Loops stop when the system asks for less motion: none here; SearchField has no loop and no transition (CR-12).

clear is the key packages/perron/src/locale/en.ts already has, "A button that clears a field or a filter". noMatches is new.

The new key is noMatches, "No matches", described in en.ts as "A search field's list: shown and announced when no suggestion matches the words typed", with the Danish, Swedish and Norwegian written by the build. It says what happened in plain words and no more than the data knows, in sentence case, as Content design asks; it doesn't address the person, since a hint such as "Try a line number such as 5C." is the caller's, in the placeholder; and it stays apart from noData, "No data to show", which a data view says when its data came back empty.

Every other word is the caller's, through label, placeholder and items, but Base UI's Dismiss, the name of its two screen-reader-only controls while the list is open: its hard-coded English, a known exception (see Keyboard and ARIA).

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.