Accessibility: aria-owns is set to a class rather than an id

[ariross]

• vue-autosuggest version: 2.0.2
• node version: v10.15.2
• npm (or yarn) version: 6.4.1

Relevant code or config

<div id="autosuggest">
    <input type="text" aria-owns="autosuggest__results" {...blahBlahProps} id="autosuggest__input" placeholder="Type 'e'" class="autosuggest__input--open"> 
    <div class="autosuggest__results-container">
        <div aria-labelledby="autosuggest" class="autosuggest__results">...</div>
     </div>
</div>

What you did:

1. Go to https://darrenjennings.github.io/vue-autosuggest/
2. Type something in autocomplete search so that you get suggestions
3. Run an accessibility tool (like aXe) or just observe aria-owns attribute on input field

What happened:

A violation concerning aria-owns is captured.

Reproduction sandbox/repository: https://darrenjennings.github.io/vue-autosuggest/

Problem description:

aria-owns is set to autosuggest__results, which is a class rather than an id. aria-owns only accepts ids.

Suggested solution:

Add an id to the autosuggest__results-container element (not autosuggest__results since it is conditionally rendered, and aria-owns must be given an id of an element that exists). Ideally, this would be based off of the main element's id. That way, custom ids can be created so that multiple autosuggests can live on the same page.

something like:

<div id="autosuggest-CUSTOM-ID">
    <input type="text" aria-owns="autosuggest-CUSTOM-ID__results-container" {...blahBlahProps} id="autosuggest__input" placeholder="Type 'e'" class="autosuggest__input--open"> 
    <div class="autosuggest__results-container" id="autosuggest-CUSTOM-ID__results-container">
        <div aria-labelledby="autosuggest" class="autosuggest__results">...</div>
     </div>
</div>

[darrenjennings]

thanks for the note. I was not aware of axe so will check it out and get this fixed!

[darrenjennings]

Released in https://github.com/darrenjennings/vue-autosuggest/releases/tag/v2.1.2