Screen readers unable to read options of `vue-search-select`

Question

I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:

1. Install a screen reader such as NVDA.
2. Turn on NVDA screen reader.
3. Go to https://vue-search-select.netlify.app/#/model
4. Tab to a search text field.
5. Confirm drop down of results appear.
6. Press the down arrow key to focus on any of the search result items.
7. Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.

Here is a 10 second clip to that demonstrates steps 3 of 7.

https://www.youtube.com/watch?v=Nxx1k1oKETI

How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?

Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.

---

I tried adding a customAttr like so:

<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
   return function() { return '" aria-label="hello" tabindex="0'; }
}

Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.

Answer 1

It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute

Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....