Add aria-multiselectable

- Implemented as described in the MDN docs: - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected Signed-off-by: Christopher Ng <[email protected]>
sagalbot · Dec 14, 2022 · e082b2c · e082b2c
1 parent 709905d
commit e082b2c
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -91,6 +91,7 @@
         v-append-to-body
         class="vs__dropdown-menu"
         role="listbox"
+        :aria-multiselectable="multiple"
         tabindex="-1"
         @mousedown.prevent="onMousedown"
         @mouseup="onMouseUp"
@@ -109,7 +110,7 @@
             'vs__dropdown-option--highlight': index === typeAheadPointer,
             'vs__dropdown-option--disabled': !selectable(option),
           }"
-          :aria-selected="index === typeAheadPointer ? true : null"
+          :aria-selected="optionAriaSelected(option, index)"
           @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
           @click.prevent.stop="selectable(option) ? select(option) : null"
         >
@@ -1212,6 +1213,24 @@ export default {
       )
     },
 
+    /**
+     * Determine the `aria-selected` value
+     * of an option
+     *
+     * @param  {Object|String} option
+     * @param  {Number} index
+     * @return {null|boolean}
+     */
+    optionAriaSelected(option, index) {
+      if (!this.selectable(option)) {
+        return null
+      }
+      if (this.multiple) {
+        return this.isOptionSelected(option)
+      }
+      return index === this.typeAheadPointer ? true : null
+    },
+
     /**
      * Ensures that options are always
      * passed as objects to scoped slots.