SearchInput

Role and semantics

The field renders as <input type="search"> with the searchbox role; it is bound to its <label>, also when the label is hidden. landmark wraps the field in a role="search" region. The clear button is named in the Provider language; the search icon and spinner are hidden.

Keyboard

Key	Behaviour
Tab	Moves to the field, then to the clear button when there is a value.
Enter	Calls onSubmit.
Escape	Clears the value; with an empty field the event passes on.

Focus

Focus wraps the whole box (focus-within). After clearing, focus returns to the field, so it is not lost when the button disappears.

Screen reader output

Example	Output
Field	“Search, search text field”
Clear button	“Clear search, button”
After clearing	“Search cleared”, polite announcement
While loading	“Searching”, once

Contrast

The border has at least 3:1; the search icon and placeholder in color-text-subtle and color-text-placeholder have 4.5:1.

WCAG 2.2

Criterion	How SearchInput meets it	What product teams must do
1.3.1 Info and relationships	A label is always present, also when hidden.	Do not leave label empty.
2.4.3 Focus order	Clearing returns focus to the field.	—
2.5.8 Target size (minimum)	The clear button is 32 px.	—
4.1.3 Status messages	Loading and cleared use role="status".	Announce the result count in a status region too.