Site search form accessibility

[rianrietveld]

The screen reader and keyboard only accessibility of the search form can be improved. Related: https://github.com/humanmade/platform-dev/issues/207

Issues

• [ ] The suggestions can not be reached by keyboard. The results disappear as soon as the keyboard focus leaves the input field.
• [ ] There is an h3 for the "no results found" message in the search. This shouldn't a heading. Headings should represent the content below.
• [ ] The "no results found" is not announced for screen readers
• [ ] the submit button has no focus style

Solutions I found an accessible example, maybe we build our own version based on this. https://haltersweb.github.io/Accessibility/autocomplete.html

Propose the following output for the "no results found" message:

• Put the message into a p instead of a H3
• Add aria-live="polite" to announce this dynamic change to screen-readers. <p class="search-bar__results__info" style="[...]" aria-live="polite">No results found</p>

The focus for the submit button can be solved like https://github.com/humanmade/platform-docs-site/pull/13/commits/f7312f555aafb72f2d7718db8137aeb1e47bc1dc

[mattheu]

This component has actually been removed from the pattern library - and lives in the handbook instead. The accessibility issues are still present so I'll open a ticket there.