Add draft for fixing (aria-)label bug on OcSelect

changelog/unreleased/enhancement-accessibility-improvements

@@ -0,0 +1,6 @@
+Enhancement: Accessibility improvements
+
+Across the board, we have implemented improvements in regards of accessibility for the web UI.
+
+https://github.com/owncloud/web/issues/10736
+https://github.com/owncloud/web/pull/10823

packages/design-system/package.json

@@ -108,7 +108,7 @@
     "vue-inline-svg": "3.1.2",
     "vue-loader": "^17.4.2",
     "vue-router": "4.2.5",
-    "vue-select": "4.0.0-beta.6",
+    "vs-vue3-select": "^1.3.5",
     "vue-style-loader": "^4.1.3",
     "vue-styleguidist": "^4.72.4",
     "vue3-gettext": "2.4.0",
@@ -132,7 +132,7 @@
     "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue": "3.4.21",
     "vue-inline-svg": "3.1.2",
-    "vue-select": "^3.12.0",
+    "vs-vue3-select": "^1.3.5",
     "webfontloader": "^1.6.28"
   },
   "engines": {

packages/design-system/src/components/OcPageSize/OcPageSize.vue

@@ -6,6 +6,7 @@
       data-testid="oc-page-size-label"
       v-text="label"
     />
+    <!-- Streamline label above into oc-select? -->
     <oc-select
       :input-id="selectId"
       class="oc-page-size-select"

packages/design-system/src/components/OcSelect/OcSelect.vue

@@ -1,13 +1,20 @@
 <template>
   <div>
-    <label v-if="label" :for="id" class="oc-label" v-text="label" />
+    <label
+      v-if="label"
+      :aria-hidden="accessibleLabel.length > 0"
+      :for="id"
+      class="oc-label"
+      v-text="label"
+    />
     <oc-contextual-helper
       v-if="contextualHelper?.isEnabled"
       v-bind="contextualHelper?.data"
       class="oc-pl-xs"
     ></oc-contextual-helper>
     <vue-select
       ref="select"
+      :aria-label="accessibleLabel"
       :disabled="disabled || readOnly"
       :filter="filter"
       :loading="loading"
@@ -93,17 +100,16 @@ import uniqueId from '../../utils/uniqueId'
 import {
   defineComponent,
   ComponentPublicInstance,
-  onMounted,
+  computed,
   ref,
   unref,
   VNodeRef,
   PropType
 } from 'vue'
+import VueSelect from 'vs-vue3-select'
 import { useGettext } from 'vue3-gettext'
-import 'vue-select/dist/vue-select.css'
+import 'vs-vue3-select/dist/vs-vue3-select.css'
 import { ContextualHelper } from '../../helpers'
-// @ts-ignore
-import VueSelect from 'vue-select'
 
 // the keycode property is deprecated in the JS event API, vue-select still works with it though
 enum KeyCode {
@@ -161,6 +167,10 @@ export default defineComponent({
       required: false,
       default: false
     },
+    ariaLabel: {
+      type: String,
+      required: true
+    },
     /**
      * Label of the select component
      * ATTENTION: this shadows the vue-select prop `label`. If you need access to that use `optionLabel`.
@@ -303,10 +313,6 @@ export default defineComponent({
       emit('search:input', (event.target as HTMLInputElement).value)
     }
 
-    onMounted(() => {
-      setComboBoxAriaLabel()
-    })
-
     const dropdownEnabled = ref(false)
     const setDropdownEnabled = (enabled: boolean) => {
       dropdownEnabled.value = enabled
@@ -354,7 +360,12 @@ export default defineComponent({
       setDropdownEnabled(true)
     }
 
+    const accessibleLabel = computed(() => {
+      return props.ariaLabel || props.label
+    })
+
     return {
+      accessibleLabel,
       select,
       userInput,
       selectDropdownShouldOpen,

packages/web-app-admin-settings/src/components/Users/GroupSelect.vue

@@ -2,6 +2,7 @@
   <div id="user-group-select-form">
     <oc-select
       :model-value="selectedOptions"
+      :aria-label="$gettext('Select groups')"
       class="oc-mb-s"
       :multiple="true"
       :options="groupOptions"

packages/web-app-epub-reader/src/App.vue

@@ -51,6 +51,7 @@
         </div>
         <oc-select
           v-model="currentChapter"
+          :aria-label="$gettext('Select a chapter')"
           class="epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l"
           :options="chapters"
           :searchable="false"

packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue

@@ -2,6 +2,7 @@
   <oc-select
     ref="tagSelect"
     v-model="selectedTags"
+    :aria-label="$gettext('Add or edit tags')"
     class="tags-select"
     :multiple="true"
     :disabled="readonly"

packages/web-runtime/package.json

@@ -38,7 +38,7 @@
     "vue-concurrency": "5.0.1",
     "vue-inline-svg": "3.1.2",
     "vue-router": "4.2.5",
-    "vue-select": "4.0.0-beta.6",
+    "vs-vue3-select": "^1.3.5",
     "vue3-gettext": "2.4.0",
     "web-runtime": "workspace:*",
     "webdav": "5.6.0",

packages/web-runtime/src/components/Account/ThemeSwitcher.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <oc-select
+      :aria-label="$gettext('Select a theme')"
       :model-value="currentThemeOrAuto"
       :clearable="false"
       :options="availableThemesAndAuto"

packages/web-runtime/src/pages/account.vue

@@ -96,6 +96,7 @@
           <dd data-testid="language" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
             <oc-select
               v-if="languageOptions"
+              :aria-label="$gettext('Select language')"
               :placeholder="$gettext('Please choose...')"
               :model-value="selectedLanguageValue"
               :clearable="false"