Merge pull request #7548 from nextcloud/bugfix/7533/add-aria-labels-o…

…n-removing-input-buttons Add aria labels to "Remove input" buttons
nextcloud · Jul 11, 2022 · b3d44a8 · b3d44a8
2 parents 7e7db28 + cc29faf
commit b3d44a8
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -30,6 +30,17 @@
 			type="text"
 			:placeholder="t('spreed', 'Search participants')"
 			@input="handleInput">
+		<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>
 		<transition-group v-if="hasSelectedParticipants"
 			name="zoom"
 			tag="div"
@@ -50,6 +61,8 @@
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
+import Close from 'vue-material-design-icons/Close.vue'
 import CancelableRequest from '../../../../utils/cancelableRequest.js'
 import debounce from 'debounce'
 import { showError } from '@nextcloud/dialogs'
@@ -60,6 +73,8 @@ import ContactSelectionBubble from './ContactSelectionBubble/ContactSelectionBub
 export default {
 	name: 'SetContacts',
 	components: {
+		Button,
+		Close,
 		ParticipantSearchResults,
 		ContactSelectionBubble,
 	},
@@ -99,6 +114,14 @@ export default {
 		displaySearchHint() {
 			return !this.contactsLoading && this.searchText === ''
 		},
+
+		isSearching() {
+			return this.searchText !== ''
+		},
+
+		cancelSearchLabel() {
+			return t('spreed', 'Cancel search')
+		},
 	},
 
 	async mounted() {
@@ -123,6 +146,14 @@ export default {
 			this.debounceFetchSearchResults()
 		},
 
+		abortSearch() {
+			this.noResults = false
+			this.contactsLoading = false
+			this.searchResults = []
+			this.searchText = ''
+			this.focusInput()
+		},
+
 		debounceFetchSearchResults: debounce(function() {
 			this.fetchSearchResults()
 		}, 250),
@@ -183,6 +214,12 @@ export default {
 		margin-top: 20px;
 		text-align: center;
 	}
+	.abort-search {
+		position: absolute;
+		right: 0;
+		top: -2px;
+		z-index: 2;
+	}
 }
 
 .selected-participants {

diff --git 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>