From 595df266732ea630bb7f138b3d11d639e361db2e Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 1 Nov 2023 16:11:10 +0100
Subject: [PATCH] feat(Select): Allow to customize `aria-label` for l10n

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/Select.vue | 40 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 503ab95c..f836f3f8 100644
--- 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.