Instant Search: aria-live accessibility improvements

[bluefuton]

This is an issue to track accessibility improvements we'd like to make to the Jetpack Instant Search prototype:

• [x] add aria-live to search results (https://github.com/Automattic/jetpack/issues/13644)
• [x] add a label to the search box (even if hidden from most users) (https://github.com/Automattic/jetpack/pull/13875)
• [x] add a button to the search (even if hidden from most users) (https://github.com/Automattic/jetpack/pull/13875)
• [x] add a <form> tag with role="search"
• [ ] aria-live + VoiceOver + Safari: results announcement is interrupted by the announcement of text field content
• [ ] aria-live + NVDA + Firefox: No announcements made for search results
• [ ] aria-live + NVDA + Chrome: announces from the start of some article at the end of the results and then goes to the previous article. Does not announce n results for y.

[jsnmoon]

fallback: make sure the form is usable even if 'instant' searching isn't possible

When would instant searching not be available?

The only scenario I could imagine is when JavaScript is disabled; in which case, the Preact application would never hook into the page and leave the initial, working form as-is.

[gibrown]

We should discuss doing an audit for https://www.w3.org/WAI/standards-guidelines/wcag/ to see where we are at.

[a8ck3n]

No announcements made for search results

This item might need to be tested again. By default, Firefox on the Mac doesn't include links in the tab loop. If the NVDA software is following the browser setup, that might be why search results are skipped. To include links, you need to enable a checkbox in System Preferences → Keyboard → Shortcuts → "Use keyboard navigation…"