Search results template

[sukhrajghuman]

Search/results pages are common in government websites. Would be good if we could create a template that focuses good UX

[gordongrace]

https://github.com/govau/design-system-starter/tree/draft-search-results/

[gordongrace]

Deployed with Netlify at:
https://govau-design-system-search-results-template.netlify.com/search-results/

Interesting points for further discussion / refinement:

• Use of role="status" for search result count display (first time we've used this). Displaying at both top and bottom of search results
• Additional skip link to bypass search filters / refinements and go directly to result Fixing issues with Windows (browsersync, onchange) and updating documentation #1
• Use of ol for search results, with expectation that start value will be changed programatically
• Prevent search engines from indexing and following search result pages
• Multiple search result types (with tags, with date, with metadata, with image)
• Conditional display of 'No results' (or similar) page alert.

New styles required:

• mark
• Whitespace modifications to override headings/paragraphs in search results
• Inline dl display for per-result metadata
• Muted display of per-result dates

Pending progress from other components

• Improved search result pagination
• Improved search input form in header
• Per-result metadata marked up using dl
• Improved search input with autosuggest / autocomplete

Potential bugs discovered:

• Focus state on targets for additional skip links persists
• Mis-aligned focus states for radio/checkbox inputs
• select input chevron display
• Excessive padding on form

Other items for discussion:

• Back to top links?
• Sort != Refine/Filter
• Click target in mobile view (esp. where results have image)
• Faceted search variants vs post-search parametric refinement
• Per result breadcrumbs?
• Related searches

[gordongrace]

Enhancements in potential future iterations:

• Highlighted "Best Bet" results
• Feature box results (for example, searching 'sbr' at ato.gov.au
• Tab-based scope switching
• Disabling browser-default autocapitalize, autocomplete, autocorrect, spellcheck behaviours for the input

[sukhrajghuman]

For sprint 137.

• Open a draft PR
• Encourage feedback from others on this template

[gordongrace]

While we wait for the pagination component to come online, I'd propose an initial iteration of this template that uses direction links for Prev/Next functionality.