Add aria-labels to colorpicker buttons

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud-libraries · Jan 26, 2023 · 0fae9f9 · 0fae9f9
1 parent f23f8e4
commit 0fae9f9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/l10n/messages.pot b/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 ""
 

diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/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" />
@@ -284,6 +286,8 @@ export default {
 		return {
 			currentColor: this.value,
 			advanced: false,
+			ariaBack: this.t('Back'),
+			ariaMore: this.t('More options'),
 		}
 	},