Vue-multiselect: Post-selection focus and styles for accessbility

[justrhysism]

When selecting a value, the dropdown closes displaying the selected value. Then nothing _appears_ to be focused. To interact with the field further, the user needs to [TAB] forward and back to gain focus once again.

What I feel should happen is the field should stay focused after any interaction until the user moves on (with either keyboard or mouse).

There should also be a styling hook (preferably via :focus; however, given the markup structure I'm not sure that would be possible without some keypress trickery inserting characters into the search field).

Ideally the component should have the same keyboard interactions (and visual cues) as the native <select> input; so it's predictable from an accessibility point of view.

[shentao]

Thank you!
Accessibility is a really tough topic and just like you said – the current markup makes it hard to make it correctly. As we’re finally getting close to the 2.0 stable release I would really appreciate some help with improving the accessibility of vue-multiselect, as later I would rather like to avoid making breaking changes.

[shentao]

Fixed. Will be available with the new release.

[mkampa]

@shentao: Is it released with version 2.0.3? Or which one?
I still have troubles to tab from one multiselect into another one using Safari. I have the feeling after I select an element the focus is lost.
In Chrome and Firefox it works fine.
Thanks!

[shentao]

Then this might be a Safari specific problem. Please open a separate Issue for that @mkampa .

[tinyfly]

See my answer here for a solution to get focus on select working: https://github.com/shentao/vue-multiselect/issues/401#issuecomment-425582096

[Yubari]

When you turn :searchable="true", the root block tabindex is set to -1, and the search input field tabindex is set to 1. Tabbing will not work until the input field is hidden(display: none). Using Opacity instead of Display will fix this problem.

[Yubari]

When you turn :searchable="true", the root block tabindex is set to -1, and the search input field tabindex is set to 1. Tabbing will not work until the input field is hidden(display: none). Using Opacity instead of Display will fix this problem.

Sry, it's fixed in v2.1.1