Description
Referencing T255902 for guidance, build the wvui-search-form for Vue.js search.
Design requirements
See T255603.
Results list
The results list follows OOUI guidelines in terms of styling and interactivity. Please refer to either OOUI or the demo for additional details.
Specs
Styling of page title
The part of the page title that does not match the search term will be bolded, e.g.
Keyboard support
Keyboard support should match the current experience on Wikipedia. This can also be seen on the demo.
- up/down keys to navigate to different search results
- the text in the search box should update to reflect whatever result is currently selected
- enter key to submit a search
States
| hovering search result |  | background darkens (#EAECF0) |
| initial load |  | demo: https://di-searchland-2.web.app/ |
| subsequent loads (if needed) |  | |
Please note the "Search within pages" link at the bottom of the list.
Acceptance criteria
- All component acceptance criteria in T255902 are covered
Create a a) new single file component file, b) UI Storybook story, and c) Jest test.
Add the minimal HTML5 template and JavaScript needed for the search use case.
Add the best-practice following descriptive ARIA roles and attributes.
Aim for the above to be merged.
Copy CSS properties from OOUI that apply to the minimal template. Aim to get this merged.
Change as needed. When changing the structure, copy any relevant styles from OOUI. For changes that require extensive discussion and are optional for search, consider forking the component within WVUI to a new directory.
Update the migration guide with lessons learned.
- Ensure finished form satisfies the design requirements above