feat(select): add uid prop to improve a11y with aria-labelledby, aria-owns and aria-controls

Author: TotomInc

docs/props.md

@@ -187,6 +187,14 @@ The `id` attribute to be passed to the `<input />` element. This is useful for a
 
 A custom class to be passed to the select control.
 
+## uid
+
+**Type**: `string | number`
+
+**Default**: `number`
+
+A unique identifier to be passed to the select control. Will be used on multiple `id` attributes for accessibility purposes such as `aria-owns`, `aria-controls`, etc.
+
 ## aria
 
 **Type**: `{ labelledby?: string; required?: boolean; }`

src/Select.vue

@@ -9,6 +9,7 @@ import MenuOption from "./MenuOption.vue";
 import MultiValue from "./MultiValue.vue";
 import Placeholder from "./Placeholder.vue";
 import Spinner from "./Spinner.vue";
+import { uniqueId } from "./utils";
 
 const props = withDefaults(
   defineProps<Props<GenericOption, OptionValue>>(),
@@ -25,6 +26,7 @@ const props = withDefaults(
     closeOnSelect: true,
     teleport: undefined,
     inputId: undefined,
+    uid: uniqueId(),
     aria: undefined,
     filterBy: (option: GenericOption, label: string, search: string) => label.toLowerCase().includes(search.toLowerCase()),
     getOptionValue: (option: GenericOption) => option.value,
@@ -348,6 +350,7 @@ onBeforeUnmount(() => {
       @click="handleControlClick($event)"
     >
       <div
+        :id="`vue-select-${uid}-combobox`"
         class="value-container"
         :class="{ 'multi': isMulti, 'has-value': selectedOptions.length > 0 }"
         role="combobox"
@@ -357,6 +360,8 @@ onBeforeUnmount(() => {
         :aria-labelledby="aria?.labelledby"
         :aria-label="selectedOptions.length ? selectedOptions.map(getOptionLabel).join(', ') : ''"
         :aria-required="aria?.required"
+        :aria-owns="`vue-select-${uid}-listbox`"
+        :aria-controls="`vue-select-${uid}-listbox`"
         aria-haspopup="true"
       >
         <Placeholder
@@ -405,6 +410,7 @@ onBeforeUnmount(() => {
             tabindex="0"
             type="text"
             aria-autocomplete="list"
+            :aria-labelledby="`vue-select-${uid}-combobox`"
             :disabled="isDisabled"
             placeholder=""
             @mousedown="openMenu()"
@@ -450,6 +456,7 @@ onBeforeUnmount(() => {
     >
       <div
         v-if="menuOpen"
+        :id="`vue-select-${uid}-listbox`"
         ref="menu"
         class="menu"
         role="listbox"

src/types.ts

@@ -88,6 +88,12 @@ export type Props<GenericOption, OptionValue> = {
    */
   class?: string;
 
+  /**
+   * Unique identifier to identify the select component, using `id` attribute.
+   * This is useful for accessibility.
+   */
+  uid?: string | number;
+
   /**
    * ARIA attributes to describe the select component. This is useful for accessibility.
    */

src/utils.ts

@@ -0,0 +1,5 @@
+let idCount = 0;
+
+export function uniqueId() {
+  return ++idCount;
+}