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

owncloud · Apr 23, 2024 · 7675f7e · 7675f7e
1 parent a7d3f43
commit 7675f7e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/packages/design-system/src/components/OcPageSize/OcPageSize.vue b/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"

diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <label v-if="label" :for="id" class="oc-label" v-text="label" />
+    <label
+      v-if="label"
+      :for="id"
+      :class="{ 'oc-invisible-sr': isLabelHidden }"
+      class="oc-label"
+      v-text="label"
+    />
     <oc-contextual-helper
       v-if="contextualHelper?.isEnabled"
       v-bind="contextualHelper?.data"
@@ -279,6 +285,10 @@ export default defineComponent({
     readOnly: {
       type: Boolean,
       default: false
+    },
+    isLabelHidden: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['search:input', 'update:modelValue'],
@@ -303,7 +313,9 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      setComboBoxAriaLabel()
+      if (!props.label) {
+        setComboBoxAriaLabel()
+      }
     })
 
     const dropdownEnabled = ref(false)

diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -2,6 +2,8 @@
   <oc-select
     ref="tagSelect"
     v-model="selectedTags"
+    :label="$gettext('Add or edit tags')"
+    :is-label-hidden="true"
     class="tags-select"
     :multiple="true"
     :disabled="readonly"