Core suggest aria-live

[skjalgepalg]

What's new

• Introduced new observed attribute empty

  • Reflects whether or not there are visible a or button elements as children of the suggest
  • Rigged to behave similarly to hidden

• core-suggest always has an id (fallback to uuid)

  • aria-controls is set on input to be more in line with WAI-ARIA authoring practices

• core-suggest creates a span with aria-live="polite" in connectedCallback only visible to screen-readers.

  • Span is placed inside document.body

• Notify screen readers by updating textContent of aria-live region when:

  • Forslag vises - Suggestions are present (not empty) and visible (not hidden)
    • Replace default with attribute live-region-shown-label, turn off by setting value to empty string ('')
    • Supports substituting {{value}} in the attribute value for number of items in list.
  • Ingen forslag - All suggestions have been hidden by filter
    • Replace default with attribute live-region-empty-label, turn off by setting value to empty string ('')
  • {{value}} forslag - Suggestions have been filtered by input ({{value}} is substituted by the number of visible a or button elements as children of the core-suggest)
    • Replace default with attribute live-region-count-label, turn off by setting value to empty string ('')

• Introduced attribute filter-disabled by suggestion from @gesi

  • Disables filtering of items in onInput, helpful when using core-suggest with fuzzy search and filtering gets in the way

Updates to textContent on aria-live-region, when visible, is done using a delay of 150 ms, to allow VoiceOver to announce more important info about the input-element before being informed of suggestions.

Docs

• Consolidated examples using tabs for plain JS and React respectively
• Fixed lazy and ajax examples consistently getting 404 from old API. Now using https://restcountries.com
• Added examples for aria-live-region
• Added section on aria-live region with info on defaults and how to customize with caveat to use of innerHTML

Next steps

Open for input on how to fix the caveat where setting innerHTML on core-suggest-element is never sent to SRs. So far just moving the update to a child-element seems to work fine. React/Svelte/Vue/Angular authoring practices are not affected by this (usually map items inside <ul> anyway). -> No longer an issue with _ariaLiveSpan being moved to body.

This change requires manual testing of intended behaviour across various devices and screen-readers (SRs). In development testing/verification has been done using Google Chrome and Safari with VoiceOver.

We will also test whether the role="combobox" is necessary for iOS still, and if it may be helpful for other devices or SRs. As the implementation is not in line with the FAQ-section of the docs. -> So far, testing indicates we can once more use combobox for all instances, not just for iOS.

Resolves https://github.com/nrkno/core-components/issues/642

[skjalgepalg]

Testing done and findings added to the docs. Should be ready for review now!