Add aria-labels to colorpicker buttons

Signed-off-by: Raimund Schlüßler <[email protected]>

Author: raimund-schluessler

l10n/messages.pot

@@ -26,6 +26,9 @@ msgstr ""
 msgid "Avatar of {displayName}, {status}"
 msgstr ""
 
+msgid "Back"
+msgstr ""
+
 msgid "Cancel changes"
 msgstr ""
 
@@ -92,6 +95,9 @@ msgstr ""
 msgid "More items …"
 msgstr ""
 
+msgid "More options"
+msgstr ""
+
 msgid "Next"
 msgstr ""
 

src/components/NcColorPicker/NcColorPicker.vue

@@ -188,13 +188,15 @@ export default {
 			<div class="color-picker__navigation">
 				<NcButton v-if="advanced"
 					type="tertiary"
+					:aria-label="ariaBack"
 					@click="handleBack">
 					<template #icon>
 						<ArrowLeft :size="20" />
 					</template>
 				</NcButton>
 				<NcButton v-if="!advanced"
 					type="tertiary"
+					:aria-label="ariaMore"
 					@click="handleMoreSettings">
 					<template #icon>
 						<DotsHorizontal :size="20" />
@@ -213,7 +215,7 @@ export default {
 <script>
 import NcButton from '../NcButton/index.js'
 import NcPopover from '../NcPopover/index.js'
-import l10n from '../../mixins/l10n.js'
+import { t } from '../../l10n.js'
 import GenColors from '../../utils/GenColors.js'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
@@ -239,8 +241,6 @@ export default {
 		NcPopover,
 	},
 
-	mixins: [l10n],
-
 	props: {
 		/**
 		 * A HEX color that represents the initial value of the picker
@@ -284,6 +284,8 @@ export default {
 		return {
 			currentColor: this.value,
 			advanced: false,
+			ariaBack: t('Back'),
+			ariaMore: t('More options'),
 		}
 	},
 
@@ -294,6 +296,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Submit a picked colour and close picker
 		 */