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]>

Author: Pytal

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.

tests/unit/Accessibility.spec.js

@@ -45,3 +45,63 @@ describe('UID', () => {
     expect(Select.find('#vs2__combobox').exists()).toBeTruthy()
   })
 })
+
+describe('Option List', () => {
+  it('multiselectable attribute should not be present by default', async () => {
+    const Select = mountDefault()
+
+    Select.vm.open = true
+    await Select.vm.$nextTick()
+
+    expect(
+      Select.findComponent({ ref: 'dropdownMenu' }).attributes()[
+        'aria-multiselectable'
+      ]
+    ).toBe(undefined)
+  })
+
+  it('multiselectable attribute should be true when multiple is true', async () => {
+    const Select = mountDefault({ multiple: true })
+
+    Select.vm.open = true
+    await Select.vm.$nextTick()
+
+    expect(
+      Select.findComponent({ ref: 'dropdownMenu' }).attributes()[
+        'aria-multiselectable'
+      ]
+    ).toBe('true')
+  })
+
+  it('selected attribute should be true on highlighted option only', async () => {
+    const Select = mountDefault()
+
+    Select.vm.open = true
+    await Select.vm.$nextTick()
+    Select.vm.typeAheadDown()
+    Select.vm.typeAheadDown()
+    await Select.vm.$nextTick()
+
+    expect(
+      Select.findAll('.vs__dropdown-option').wrappers.map(
+        (option) => option.attributes()['aria-selected']
+      )
+    ).toStrictEqual([undefined, 'true', undefined])
+  })
+
+  it('selected attribute should be true on all selected options when multiple is true', async () => {
+    const Select = mountDefault({
+      multiple: true,
+      value: ['one', 'two'],
+    })
+
+    Select.vm.open = true
+    await Select.vm.$nextTick()
+
+    expect(
+      Select.findAll('.vs__dropdown-option').wrappers.map(
+        (option) => option.attributes()['aria-selected']
+      )
+    ).toStrictEqual(['true', 'true', undefined])
+  })
+})