Add aria labels to "Remove input" buttons

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 23 insertions, 7 deletions

diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index eb173e369..e637402a8 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -28,17 +28,31 @@
 			type="text"
 			:placeHolder="placeholderText"
 			@keypress.enter.prevent="handleSubmit">
-		<button v-if="isSearching"
-			class="abort-search icon-close"
-			@click.prevent="abortSearch" />
+		<Button v-if="isSearching"
+			class="abort-search"
+			type="tertiary-no-background"
+			:aria-label="cancelSearchLabel"
+			@click="abortSearch">
+			<template #icon>
+				<Close decorative
+					title=""
+					:size="20" />
+			</template>
+		</Button>
 	</form>
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
+import Close from 'vue-material-design-icons/Close.vue'
 import { EventBus } from '../../../services/EventBus.js'
 
 export default {
 	name: 'SearchBox',
+	components: {
+		Button,
+		Close,
+	},
 	props: {
 		/**
 		 * The placeholder for the input field
@@ -68,6 +82,11 @@ export default {
 			localValue: '',
 		}
 	},
+	computed: {
+		cancelSearchLabel() {
+			return t('spreed', 'Cancel search')
+		},
+	},
 	watch: {
 		localValue(localValue) {
 			this.$emit('update:value', localValue)
@@ -136,10 +155,7 @@ export default {
 }
 
 .abort-search {
-	margin-left: -34px;
-	z-index: 1;
-	border: none;
-	background-color: transparent
+	margin-left: -44px;
 }
 
 </style>