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>