Added the combobox, listbox, and option roles to the input, ul, and li items respectively per W3C spec, Closes sagalbot#606

beattyml1 · beattyml1 · commit d00b567428b1 · 2018-08-01T13:04:08.000-04:00
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -355,6 +355,7 @@
               :tabindex="tabindex"
               :readonly="!searchable"
               :id="inputId"
+              role="combobox"
               aria-label="Search for option"
       >
 
@@ -377,8 +378,8 @@
     </div>
 
     <transition :name="transition">
-      <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
-        <li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
+      <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" role="listbox">
+        <li role="option" v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
           <a @mousedown.prevent="select(option)">
           <slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
             {{ getOptionLabel(option) }}
