From 864a7e944d0b9c38c72a9bc6b16e96ebc7ce7ea8 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 14 Dec 2023 21:38:13 -0800
Subject: [PATCH 1/6] enh(a11y): Improve accessibility with correct attributes
 - Move accessibility attributes from wrapper to input - Move uid from
 dropdown toggle element id to wrapper - Wrap open indicator icon with button
 element - Handle toggle dropdown on selected options to not conflict with
 open indicator button - Label listbox element

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/components/Select.vue                 | 69 ++++++++++++++++-------
 src/css/global/states.css                 |  1 +
 src/css/modules/open-indicator-button.css |  8 +++
 src/css/vue-select.css                    |  1 +
 4 files changed, 58 insertions(+), 21 deletions(-)
 create mode 100644 src/css/modules/open-indicator-button.css

diff --git a/src/components/Select.vue b/src/components/Select.vue
index f836f3f8b..a0360b79a 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -3,19 +3,19 @@
 </style>
 
 <template>
-  <div :dir="dir" class="v-select" :class="stateClasses">
+  <div
+    :id="`v-select-${uid}`"
+    :dir="dir"
+    class="v-select"
+    :class="stateClasses"
+  >
     <slot name="header" v-bind="scope.header" />
-    <div
-      :id="`vs${uid}__combobox`"
-      ref="toggle"
-      class="vs__dropdown-toggle"
-      role="combobox"
-      :aria-expanded="dropdownOpen.toString()"
-      :aria-owns="`vs${uid}__listbox`"
-      :aria-label="ariaLabelCombobox"
-      @mousedown="toggleDropdown($event)"
-    >
-      <div ref="selectedOptions" class="vs__selected-options">
+    <div ref="toggle" class="vs__dropdown-toggle">
+      <div
+        ref="selectedOptions"
+        class="vs__selected-options"
+        @mousedown="toggleDropdown"
+      >
         <slot
           v-for="(option, index) in selectedValue"
           name="selected-option-container"
@@ -70,13 +70,25 @@
           <component :is="childComponents.Deselect" />
         </button>
 
-        <slot name="open-indicator" v-bind="scope.openIndicator">
-          <component
-            :is="childComponents.OpenIndicator"
-            v-if="!noDrop"
-            v-bind="scope.openIndicator.attributes"
-          />
-        </slot>
+        <!-- tabindex -1 is used to remove it from the tab sequence as tabbing to the input combobox opens the dropdown -->
+        <button
+          v-if="!noDrop"
+          ref="openIndicatorButton"
+          class="vs__open-indicator-button"
+          type="button"
+          tabindex="-1"
+          :aria-labelledby="`vs${uid}__listbox`"
+          :aria-controls="`vs${uid}__listbox`"
+          :aria-expanded="dropdownOpen.toString()"
+          @mousedown="toggleDropdown"
+        >
+          <slot name="open-indicator" v-bind="scope.openIndicator">
+            <component
+              :is="childComponents.OpenIndicator"
+              v-bind="scope.openIndicator.attributes"
+            />
+          </slot>
+        </button>
 
         <slot name="spinner" v-bind="scope.spinner">
           <div v-show="mutableLoading" class="vs__spinner">Loading...</div>
@@ -92,6 +104,7 @@
         v-append-to-body
         class="vs__dropdown-menu"
         role="listbox"
+        :aria-label="ariaLabelListbox"
         :aria-multiselectable="multiple"
         tabindex="-1"
         @mousedown.prevent="onMousedown"
@@ -131,6 +144,7 @@
         v-else
         :id="`vs${uid}__listbox`"
         role="listbox"
+        :aria-label="ariaLabelListbox"
         style="display: none; visibility: hidden"
       ></ul>
     </transition>
@@ -305,6 +319,16 @@ export default {
       default: 'Search for options',
     },
 
+    /**
+     * Allows to customize the `aria-label` set on the listbox element.
+     * @type {String}
+     * @default 'Options'
+     */
+    ariaLabelListbox: {
+      type: String,
+      default: 'Options',
+    },
+
     /**
      * Allows to customize the `aria-label` set on the clear-selected button
      * @type {String}
@@ -811,14 +835,17 @@ export default {
       return {
         search: {
           attributes: {
+            id: this.inputId,
             disabled: this.disabled,
             placeholder: this.searchPlaceholder,
             tabindex: this.tabindex,
             readonly: !this.searchable,
-            id: this.inputId,
+            role: 'combobox',
             'aria-autocomplete': 'list',
-            'aria-labelledby': `vs${this.uid}__combobox`,
+            'aria-label': this.ariaLabelCombobox,
             'aria-controls': `vs${this.uid}__listbox`,
+            'aria-owns': `vs${this.uid}__listbox`,
+            'aria-expanded': this.dropdownOpen.toString(),
             ref: 'search',
             type: 'search',
             autocomplete: this.autocomplete,
diff --git a/src/css/global/states.css b/src/css/global/states.css
index 3c2659f91..ccbf334b6 100644
--- a/src/css/global/states.css
+++ b/src/css/global/states.css
@@ -20,6 +20,7 @@
     .vs__clear,
     .vs__search,
     .vs__selected,
+    .vs__open-indicator-button,
     .vs__open-indicator {
         cursor: var(--vs-disabled-cursor);
         background-color: var(--vs-disabled-bg);
diff --git a/src/css/modules/open-indicator-button.css b/src/css/modules/open-indicator-button.css
new file mode 100644
index 000000000..0b662d6e0
--- /dev/null
+++ b/src/css/modules/open-indicator-button.css
@@ -0,0 +1,8 @@
+/* Open Indicator Button */
+
+.vs__open-indicator-button {
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+}
diff --git a/src/css/vue-select.css b/src/css/vue-select.css
index 115982496..8b09b372b 100644
--- a/src/css/vue-select.css
+++ b/src/css/vue-select.css
@@ -4,6 +4,7 @@
 @import 'global/states.css';
 
 @import 'modules/dropdown-toggle.css';
+@import 'modules/open-indicator-button.css';
 @import 'modules/open-indicator.css';
 @import 'modules/clear.css';
 @import 'modules/dropdown-menu.css';

From 9fda5a14e98dd07620d25b615d1bb9829a175756 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 14 Dec 2023 21:38:13 -0800
Subject: [PATCH 2/6] test: Test uid on wrapper

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 tests/unit/Accessibility.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/unit/Accessibility.spec.js b/tests/unit/Accessibility.spec.js
index ba4fc13b0..82e21e950 100644
--- a/tests/unit/Accessibility.spec.js
+++ b/tests/unit/Accessibility.spec.js
@@ -37,12 +37,12 @@ describe('Search Slot Scope', () => {
 describe('UID', () => {
   it('works with strings', () => {
     const Select = mountDefault({ uid: 'hello' })
-    expect(Select.find('#vshello__combobox').exists()).toBeTruthy()
+    expect(Select.find('#v-select-hello').exists()).toBeTruthy()
   })
 
   it('works with numbers', () => {
     const Select = mountDefault({ uid: 2 })
-    expect(Select.find('#vs2__combobox').exists()).toBeTruthy()
+    expect(Select.find('#v-select-2').exists()).toBeTruthy()
   })
 })
 

From f95ca7f2492578ee581910714f3a6b3bcf7f6005 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 14 Dec 2023 21:38:13 -0800
Subject: [PATCH 3/6] test: Test open indicator

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 tests/unit/Accessibility.spec.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/tests/unit/Accessibility.spec.js b/tests/unit/Accessibility.spec.js
index 82e21e950..511d4280e 100644
--- a/tests/unit/Accessibility.spec.js
+++ b/tests/unit/Accessibility.spec.js
@@ -46,6 +46,25 @@ describe('UID', () => {
   })
 })
 
+describe('Open Indicator', () => {
+  it('hidden from keyboard navigation', () => {
+    const Select = mountDefault()
+    expect(
+      Select.findComponent({ ref: 'openIndicatorButton' }).attributes(
+        'tabindex'
+      )
+    ).toEqual('-1')
+  })
+
+  it('toggle with mouse', () => {
+    const Select = mountDefault()
+    Select.findComponent({ ref: 'openIndicatorButton' }).trigger('mousedown')
+    expect(Select.vm.open).toEqual(true)
+    Select.findComponent({ ref: 'openIndicatorButton' }).trigger('mousedown')
+    expect(Select.vm.open).toEqual(false)
+  })
+})
+
 describe('Option List', () => {
   it('multiselectable attribute should not be present by default', async () => {
     const Select = mountDefault()

From c6b2c8e95c5a2129fd0c68d1ae431c0de03fe576 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 14 Dec 2023 21:38:13 -0800
Subject: [PATCH 4/6] test: Test aria-expanded on search input

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 tests/unit/Accessibility.spec.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/tests/unit/Accessibility.spec.js b/tests/unit/Accessibility.spec.js
index 511d4280e..14971c273 100644
--- a/tests/unit/Accessibility.spec.js
+++ b/tests/unit/Accessibility.spec.js
@@ -32,6 +32,21 @@ describe('Search Slot Scope', () => {
       ).toEqual(`vs${Select.vm.uid}__option-2`)
     })
   })
+
+  describe('aria-expanded', () => {
+    it('expanded attribute should reflect dropdown open state', async () => {
+      const Select = mountDefault()
+      const input = Select.findComponent({ ref: 'search' })
+
+      expect(Select.vm.open).toEqual(false)
+      expect(input.attributes('aria-expanded')).toEqual('false')
+
+      Select.vm.open = true
+      await Select.vm.$nextTick()
+      expect(Select.vm.open).toEqual(true)
+      expect(input.attributes('aria-expanded')).toEqual('true')
+    })
+  })
 })
 
 describe('UID', () => {

From 60d20dbd092b3b1ff4728f3c3b55c273f8dd6d81 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 14 Dec 2023 21:38:13 -0800
Subject: [PATCH 5/6] test: Test selected options wrapper

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 tests/unit/Accessibility.spec.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/tests/unit/Accessibility.spec.js b/tests/unit/Accessibility.spec.js
index 14971c273..0dd1af28e 100644
--- a/tests/unit/Accessibility.spec.js
+++ b/tests/unit/Accessibility.spec.js
@@ -61,6 +61,16 @@ describe('UID', () => {
   })
 })
 
+describe('Selected Options Wrapper', () => {
+  it('toggle with mouse', () => {
+    const Select = mountDefault()
+    Select.findComponent({ ref: 'selectedOptions' }).trigger('mousedown')
+    expect(Select.vm.open).toEqual(true)
+    Select.findComponent({ ref: 'selectedOptions' }).trigger('mousedown')
+    expect(Select.vm.open).toEqual(false)
+  })
+})
+
 describe('Open Indicator', () => {
   it('hidden from keyboard navigation', () => {
     const Select = mountDefault()

From ec2662499402c3c037fb5345226444ce998f75b3 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Mon, 8 Jan 2024 16:10:09 -0800
Subject: [PATCH 6/6] chore(ci): Bump max js bundle size

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 508e6a22e..10f9b41a1 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
       {
         "path": "./dist/vue-select.js",
         "compression": "none",
-        "maxSize": "22 KB"
+        "maxSize": "23 KB"
       },
       {
         "path": "./dist/vue-select.css",