sl-design-system
[V1] Search field
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
Reference Links
### 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)
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. 😊
