Accessibility problems for screen reader users

[annam002]

For screen reader users there are the following problems with vue-select (tested with NVDA and Chrome):

• The select expands when it gets the focus
• When you open the select, it does not state which option is selected.
• The aria-labels inside the component are hardcoded. Would be nice to be able to set them from outside. This is especially a problem when you use them in a form and it just says "Search for option" as a label for the drop down. The user does not know what is meant by this.
  Workaround: Override the hardcoded label like this: vue-select.$refs.toggle.setAttribute('aria-label', 'my-label');
• The list-footer slot is not read by the screen reader, so important information might be missed.

vue-select version: 3.10.8

[sagalbot]

Thanks for reporting! The current focus system leads to a lot of issues. I'll have to tackle that in the next major, but the rest should be fixable within the current system.

[joemaffei]

@annam002 I was able to get around the aria-label issue with a less-than-elegant solution:

<template>
  <div ref="wrapper">
    <VSelect etc />
  </div>
</template>

<script setup>
import { onMounted, ref, useAttrs } from "vue";

const attrs = useAttrs();
const wrapper = ref();

onMounted(() => {
  if (attrs["aria-label"]) {
    const combobox = wrapper.value?.querySelector("[role=combobox]");
    combobox?.setAttribute("aria-label", attrs["aria-label"]);
  }
});
</script>

[WillSullivan]

Facing the same issue trying to update a website to make it more accessible. Essentially did OP's hack, but then it broke some time ago and had to be updated because it depends on the internal impl of code we don't own. Being able to apply a label to the component and have it actually be read by screen readers would be great.