CODEWITHSUNDEEP
vue.jsaccessibilityvue-multiselect
Undine
Undine

Reputation: 1

Vue Multiselect not accessible for screen readers when it is disabled

I am using Vue and multiselect to have a dropdown of countries. Issue happens when the dropdown is prefilled with some value and is disabled. I have a requirement, that this value should still be accessible for screen readers - I am using NVDA for testing this.

When dropdown is disabled, you cannot 'tab' over it, and the value does not get read by NVDA. Cannot post real code, but any example of Multiselect should be ok for question purpose.

<div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    track-by="country"
    :disabled="true">
  </multiselect>
</div>

I tried to add tabindex=0 to the multiselect, this allows for screen reader to see this disabled dropdown, but the text that is read has the country name, and clickable at the end. This is not OK, as the field is not clickable.

<div id="app">
  <multiselect 
    tabindex="0"
    v-model="value" 
    :options="options"
    track-by="country"
    :disabled="true">
  </multiselect>
</div>

Upvotes: 0

Views: 119

Answers (1)

Andy
Andy

Reputation: 6170

That is normal behaviour. A disabled form control is removed from tab order.

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.

You should be able to read the value in read in read mode, rather than form mode (tab navigation).

With NVDA that would be

NVDA + Arrow down

If the presence of the value is important when filling out the form, the HTML readonly attribute would do what you are looking for.

PrimeVue’s multiselect component doesn’t seem to support that property.

Upvotes: 0

Related Questions