What the component handles
- Uses type="search" for proper search input semantics
- Associated helper message and error message announced by screen readers in a correct order
- Required attribute announced by the screen readers
What you need to provide
- aria-labelledby if you're referencing an existing label element
- If a Placeholder is the sole way of describing the required format (which should be avoided by all means), add a hidden label with the format example, and use aria-describedby
- For dropdown search compositions: provide aria-controls (pointing to dropdown), aria-expanded (true/false based on dropdown state), and aria-autocomplete="list" props
- For dynamic search results: use aria-live="polite" on the results container to announce when results change as user types
- For empty search states: ensure "no results found" or similar messages are properly announced to screen readers and not just visual
Color contrast
Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:
- background.static.xxx tokens except for background.static.inverse and background.static.on-color
- in default Card variant.