Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@cx0der
Created November 1, 2018 06:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cx0der/376f38f23ed6ba52241362ae7433b3a1 to your computer and use it in GitHub Desktop.
Save cx0der/376f38f23ed6ba52241362ae7433b3a1 to your computer and use it in GitHub Desktop.
vueselect with event listeners and aria attributes
<div
:aria-expanded="[isOpen ? 'true' : 'false']"
:aria-owns="'lbox_' + _uid"
:class="['select__dropdown', isOpen ? 'select__dropdown--open' : 'select__dropdown--close']"
@click="toggle"
@keyup.space="toggle"
@keyup.up="moveUp"
@keyup.down="moveDown"
@keyup.enter="selectFromKeyboard"
aria-autocomplete="none"
role="combobox"
tabindex="-1">
<span
class="select__value"
tabindex="0">{{ mutableValue }}</span>
<ul
:id="'lbox_' + _uid"
:class="['select__optionlist', isOpen ? '' : 'select__optionlist--close']"
role="listbox">
<li
v-for="(opt, idx) in items"
:aria-selected="[isItemSelected(idx) ? 'true' : 'false']"
:class="['select__option', isItemSelected(idx) ? 'select__option--selected': '']"
:key="idx"
role="option"
@click="select(idx)">{{ opt }}</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment