feat: add aria prop, improve accessibility with aria

Author: TotomInc

README.md

@@ -102,6 +102,10 @@ Teleport the menu outside of the component DOM tree. You can pass a valid string
 
 **Note**: top and left properties are calculated using a ref on the `.vue-select` with a `container.getBoundingClientRect()`.
 
+**aria**: `{ labelledby?: string }` (default: `undefined`)
+
+Aria attributes to be passed to the select control to improve accessibility.
+
 **getOptionLabel**: `(option: Option) => string` (default: `option => option.label`)
 
 A function to get the label of an option. This is useful when you want to use a property different from `label` as the label of the option.

src/MenuOption.vue

@@ -30,14 +30,14 @@ watch(
 </script>
 
 <template>
-  <button
+  <div
     ref="option"
-    type="button"
-    class="menu-option"
     tabindex="-1"
+    role="option"
     :class="{ focused: isFocused, selected: isSelected }"
+    :aria-disabled="false"
     @click="emit('select')"
   >
     <slot />
-  </button>
+  </div>
 </template>

src/Select.vue

@@ -45,6 +45,12 @@ const props = withDefaults(
      * JavaScript, instead of using CSS absolute & relative positioning.
      */
     teleport?: string;
+    /**
+     * ARIA attributes to describe the select component. This is useful for accessibility.
+     */
+    aria?: {
+      labelledby?: string;
+    };
     /**
      * A function to get the label of an option. By default, it assumes the option is an
      * object with a `label` property. Used to display the selected option in the input &
@@ -70,6 +76,7 @@ const props = withDefaults(
     isMulti: false,
     closeOnSelect: true,
     teleport: undefined,
+    aria: undefined,
     getOptionLabel: (option: Option) => option.label,
     getMultiValueLabel: (option: Option) => option.label,
   },
@@ -261,7 +268,10 @@ onBeforeUnmount(() => {
         :class="{ multi: isMulti }"
         role="combobox"
         :aria-expanded="menuOpen"
-        :aria-label="placeholder"
+        :aria-describedby="placeholder"
+        :aria-description="placeholder"
+        :aria-labelledby="aria?.labelledby"
+        :aria-label="selectedOptions.length ? selectedOptions.map(getOptionLabel).join(', ') : ''"
       >
         <div
           v-if="!props.isMulti && selectedOptions[0]"
@@ -336,6 +346,9 @@ onBeforeUnmount(() => {
       <div
         v-if="menuOpen"
         class="menu"
+        role="listbox"
+        :aria-label="aria?.labelledby"
+        :aria-multiselectable="isMulti"
         :style="{
           width: props.teleport ? `${container?.getBoundingClientRect().width}px` : '100%',
           top: props.teleport ? calculateMenuPosition().top : 'unset',