Merge pull request #1 from nextcloud-deps/enh/a11y-aria-multiselectable

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)"
           @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
           @click.prevent.stop="selectable(option) ? select(option) : null"
         >
@@ -1221,6 +1222,20 @@ export default {
       )
     },
 
+    /**
+     * Determine the `aria-selected` value
+     * of an option
+     *
+     * @param  {Object|String} option
+     * @return {null|string}
+     */
+    optionAriaSelected(option) {
+      if (!this.selectable(option)) {
+        return null
+      }
+      return String(this.isOptionSelected(option))
+    },
+
     /**
      * Ensures that options are always
      * passed as objects to scoped slots.

tests/unit/Accessibility.spec.js

@@ -45,3 +45,62 @@ 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'
+      ]
+    ).toEqual(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'
+      ]
+    ).toEqual('true')
+  })
+
+  it('selected attribute should be true if selected, false otherwise', async () => {
+    const Select = mountDefault({
+      value: 'two',
+    })
+
+    Select.vm.open = true
+    await Select.vm.$nextTick()
+
+    expect(
+      Select.findAll('.vs__dropdown-option').wrappers.map(
+        (option) => option.attributes()['aria-selected']
+      )
+    ).toStrictEqual(['false', 'true', 'false'])
+  })
+
+  it('selected attribute should be true on all selected options when multiple is true, false otherwise', 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', 'false'])
+  })
+})