[V1] Search field

[DanielleRameau]

User Story

As a Sanoma Learning Design System user, I want a user-friendly Search Field Component that can effectively handle various use cases across our educational products. This Search Field Component should be adaptable to convey:

Definition

The search Field consists of a variation of an input field specific to filtering content in a UI close to it.

Key Points

• Users can find data much faster when there is a large amount of it.
• Use at a page level to filter the content on a specific part of the page.

Acceptance Criteria

Elements	Name	Optional
Search icon (Icon)	No
Placeholder	No
Clear Button	Yes
Search Button	Yes

States

• Idle
• Hover
• Active
• Disabled

Accessibility

• discover: hide the label or use aria-label? Ask Anna Karon
• aria-controls attribute

Behaviours

A11y - Keyboard Navigation:

• Enter In the search field to submit the search.
• Tab If the search button is visible, the TAB moves to it. The user can press with ENTER.
• Esc to clear the input.

Figma Links

• Figma Search Field Component Research

Reference Links

• Simple Search - NNGroup
• Perfect Search - UX Planet
• Search Input - Carbon

### Tasks
- [ ] https://github.com/sl-design-system/components/issues/1140
- [ ] https://github.com/sl-design-system/components/issues/1144
- [ ] https://github.com/sl-design-system/components/issues/1146
- [ ] https://github.com/sl-design-system/components/issues/1147
- [ ] https://github.com/sl-design-system/components/issues/1148

### CFA Interest
- [ ] TEAS
- [ ] This component is needed for data grid (data grid has a CFA interest of 10)

[anna-lach]

Accessibility:

As Anna Karoń suggests the best way would be to use <search> HTML element (https://www.scottohara.me/blog/2023/03/24/search-element.html, https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element). aria-label is also necessary, optionally we can hide <label> visually, but the effect should be the same. We need to remember about translations in aria-label/label as well. 😊