SearchField

WCAG 2.1 AA — release blocker

Web (React DOM)

• Renders <input type="search" role="search"> inside the Input wrapper.
• The magnifier icon is aria-hidden — purely decorative.
• The clear button is a real <button> with aria-label="Clear search" (or your override via clearLabel).
• Focus ring uses the same --color-ring token as Input — consistent across all form fields.
• 48 px height when size="lg" to exceed the touch-target rule.

React Native

• Renders TextInput inside a View.
• accessibilityLabel defaults to the placeholder so screen readers announce the field's purpose.
• The clear button uses accessibilityRole="button" with accessibilityLabel={clearLabel}.

Keyboard

• Tab moves focus to the input.
• Type to search. Enter triggers the host form's submit if wrapped in a <form>.
• Tab again moves focus to the clear button when value is non-empty; Enter/Space clears.

Reduced motion

No transitions on the field itself. Animation that depends on search results (popover open/close) lives in the host.

Color is never the only signal

• The clear-button affordance is icon + accessible name — colour is not the cue.
• Placeholder vs. value contrast is mediated by text-muted-foreground vs text-foreground — both verified ≥ 4.5:1.

Audit checklist

• Clear button has aria-label / accessibilityLabel.
• Tab reaches the input then the clear button.
• Placeholder colour ≥ 4.5:1.
• 48 px height on lg.