search

shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.69k stars 988 forks source link

Accessibility: support aria-label #1050

Open lenzls opened 5 years ago

lenzls commented 5 years ago

Right now the only way I see to add a label to the underlying input field, is to wrap the whole thing in a label like

<label>
    Some description
    <vue-multiselect />
</label>

This dictates a certain html structure and is a bit annoying.

It would be nice if I could pass properties for aria-label, aria-labelled-by or even simply id to the multiselect component which forwards them to the input.

This opens up the ways like

<label for="<someid>">
    Some description
</label>
<vue-multiselect input-id="<someid>" />

or even

<vue-multiselect aria-label="Some description" />

The html structure is not forced on me anymore when trying to comply with web (a11y) standards.

Opinions?

shentao commented 5 years ago

Would you like to introduce a PR with that feature? There’s been an amazing contribution when it comes to a11y recently and I’m tempted to ship a release this weekend. Would love to have this released too!

lenzls commented 5 years ago

I think I can but it will take until the weekend probably.

lenzls commented 5 years ago

Okay, it seems that the id-feature is already implemented and I just missed it.

<label for="<someid>">
    Some description
</label>
<vue-multiselect id="<someid>" />

should work.

Even though, now that I think about it, this binds the id to the input of the searchfield. Maybe it would be more sensible to bind it to the listbox like this:

<label for="listbox-<someid>">
    Some description
</label>
<vue-multiselect id="<someid>" />

Sadly can't test this with a screen reader right now.