Merge pull request #4751 from nextcloud-libraries/chore/update-vue-se…

…lect

fix(NcSelect): Update `@nextcloud/vue-select` and add translated options for `aria-labels`

l10n/messages.pot

@@ -56,6 +56,9 @@ msgstr ""
 msgid "Clear search"
 msgstr ""
 
+msgid "Clear selected"
+msgstr ""
+
 msgid "Clear text"
 msgstr ""
 
@@ -83,6 +86,9 @@ msgstr ""
 msgid "Custom"
 msgstr ""
 
+msgid "Deselect {option}"
+msgstr ""
+
 msgid "do not disturb"
 msgstr ""
 
@@ -218,6 +224,9 @@ msgstr ""
 msgid "Search emoji"
 msgstr ""
 
+msgid "Search for options"
+msgstr ""
+
 msgid "Search results"
 msgstr ""
 

package.json

@@ -71,7 +71,7 @@
     "@nextcloud/l10n": "^2.0.1",
     "@nextcloud/logger": "^2.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue-select": "^3.23.0",
+    "@nextcloud/vue-select": "^3.24.0",
     "@vueuse/components": "^10.0.2",
     "@vueuse/core": "^10.1.2",
     "clone": "^2.1.2",

src/components/NcSelect/NcSelect.vue

@@ -533,8 +533,9 @@ export default {
 </template>
 
 <script>
-import { VueSelect } from '@nextcloud/vue-select'
 import '@nextcloud/vue-select/dist/vue-select.css'
+
+import { VueSelect } from '@nextcloud/vue-select'
 import {
 	autoUpdate,
 	computePosition,
@@ -543,6 +544,7 @@ import {
 	offset,
 	shift,
 } from '@floating-ui/dom'
+import { t } from '../../l10n.js'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -552,7 +554,6 @@ import NcListItemIcon from '../NcListItemIcon/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 import l10n from '../../mixins/l10n.js'
-
 import GenRandomId from '../../utils/GenRandomId.js'
 
 export default {
@@ -574,6 +575,32 @@ export default {
 		// Add VueSelect props to $props
 		...VueSelect.props,
 
+		/**
+		 * `aria-label` for the clear input button
+		 */
+		ariaLabelClearSelected: {
+			type: String,
+			default: t('Clear selected'),
+		},
+
+		/**
+		 * `aria-label` for the search input
+		 */
+		ariaLabelCombobox: {
+			type: String,
+			default: t('Search for options'),
+		},
+
+		/**
+		 * 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) => t('Deselect {option}', { option: optionLabel }),
+		},
+
 		/**
 		 * Append the dropdown element to the end of the body
 		 * and size/position it dynamically.