Merge pull request #27 from susnux/fix/aria-label

feat(Select): Allow to customize `aria-label` for l10n
nextcloud-deps · Nov 2, 2023 · 58ec531 · 58ec531
2 parents e2881d6 + 595df26
commit 58ec531
Showing 1 changed file with 35 additions and 5 deletions.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -12,7 +12,7 @@
       role="combobox"
       :aria-expanded="dropdownOpen.toString()"
       :aria-owns="`vs${uid}__listbox`"
-      aria-label="Search for option"
+      :aria-label="ariaLabelCombobox"
       @mousedown="toggleDropdown($event)"
     >
       <div ref="selectedOptions" class="vs__selected-options">
@@ -37,8 +37,8 @@
               :disabled="disabled"
               type="button"
               class="vs__deselect"
-              :title="`Deselect ${getOptionLabel(option)}`"
-              :aria-label="`Deselect ${getOptionLabel(option)}`"
+              :title="ariaLabelDeselectOption(getOptionLabel(option))"
+              :aria-label="ariaLabelDeselectOption(getOptionLabel(option))"
               @mousedown.stop="deselect(option)"
               @keydown.enter="keyboardDeselect(option, index)"
             >
@@ -63,8 +63,8 @@
           :disabled="disabled"
           type="button"
           class="vs__clear"
-          title="Clear Selected"
-          aria-label="Clear Selected"
+          :title="ariaLabelClearSelected"
+          :aria-label="ariaLabelClearSelected"
           @click="clearSelection"
         >
           <component :is="childComponents.Deselect" />
@@ -295,6 +295,36 @@ export default {
       default: 'label',
     },
 
+    /**
+     * Allows to customize the `aria-label` set on the comobobox for searching options.
+     * @type {String}
+     * @default 'Search for options'
+     */
+    ariaLabelCombobox: {
+      type: String,
+      default: 'Search for options',
+    },
+
+    /**
+     * Allows to customize the `aria-label` set on the clear-selected button
+     * @type {String}
+     * @default 'Clear selected'
+     */
+    ariaLabelClearSelected: {
+      type: String,
+      default: 'Clear selected',
+    },
+
+    /**
+     * Allows to customize the `aria-label` for the deselect-option button
+     * The default is "Deselect " + optionLabel
+     * @type {(optionLabel: string) => string}
+     */
+    ariaLabelDeselectOption: {
+      type: Function,
+      default: (optionLabel) => `Deselect ${optionLabel}`,
+    },
+
     /**
      * Value of the 'autocomplete' field of the input
      * element.