Vue-multiselect: Aria roles listbox and option are not showing up

[swthate]

Reproduction Link

Take a look at the provided reproduction fiddle: https://jsfiddle.net/shentao/jqofkzxc/3296/

Steps to reproduce

Open your browser's dev tools and inspect your way to the multiselect__content unordered list element.

Expected behaviour

Based on lines 100 and 112 of vue-multiselect/Multiselect.vue the unordered list should have an aria role of listbox and each element within the list should have an aria role of "option"

Actual behaviour

When you visit the fiddle provided above and look at the actual output the list and the options within the list do not have any aria roles despite their presence in the component's code. This makes the navigation of the component via screen readers all but impossible.

[shentao]

Accessibility is a common issue with Multiselect v2, sadly. But it’s also one of the core focuses behind the v3. Hopefully, we will be able to ship it soon and at last, solve that problem.

[swthate]

Thank you for your response, @shentao

I did find that we were missing an id when calling <multiselect/>. Giving the component an id helped it finally create those aria roles.

But then when doing some a11y QA I got a weird error when browsing the page with VoiceOver on mac. If I went into the dropdown menu using the screen reader from the search input and then went _back_ to the search input Chrome would crash and display RESULT_CODE_UNINSTALL_USER_CANCEL.

I'm kind of assuming that's an issue between Chrome and VoiceOver and not the component though.

[shentao]

Whoa. That sounds like a pretty serious crash. I don’t think any website should be able to cause that, so I would also assume that is something between Chrome and VoiceOver. Have you tried using VoiceOver with Safari?
Truth be told though, in my projects where a11y is a requirement I tend to replace vue-multiselect with native select (where possible). I’ve also seen https://github.com/vue-a11y/vue-accessible-multiselect which might be a solid alternative, though I haven’t yet used it.

Hopefully in v3, those choices won’t be necessary...

[jgrauel]

I did find that we were missing an id when calling <multiselect/>. Giving the component an id helped it finally create those aria roles.
I am unable to get the roles to display.
From what I can see the changes in master have never been released that include the accessibility updates. Are there plans to release or are you waiting to jump to v3?