From 022aeb4640703643c0bd59211203490c4e0887d0 Mon Sep 17 00:00:00 2001
From: kristian-zendato <kristian.zendato@nextcloud.com>
Date: Thu, 13 Aug 2026 13:50:34 +0000
Subject: [PATCH] fix: make unified filter chip accessible

Signed-off-by: kristian-zendato <kristian.zendato@nextcloud.com>
---
 .../UnifiedSearch/SearchFilterChip.vue        | 82 -------------------
 .../UnifiedSearch/UnifiedSearchModal.vue      | 18 ++--
 2 files changed, 12 insertions(+), 88 deletions(-)
 delete mode 100644 core/src/components/UnifiedSearch/SearchFilterChip.vue

diff --git a/core/src/components/UnifiedSearch/SearchFilterChip.vue b/core/src/components/UnifiedSearch/SearchFilterChip.vue
deleted file mode 100644
index 742ccca560039..0000000000000
--- a/core/src/components/UnifiedSearch/SearchFilterChip.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="chip">
-		<span class="icon">
-			<slot name="icon" />
-			<span v-if="pretext.length"> {{ pretext }} : </span>
-		</span>
-		<span class="text">{{ text }}</span>
-		<span class="close-icon" @click="deleteChip">
-			<CloseIcon :size="18" />
-		</span>
-	</div>
-</template>
-
-<script>
-import CloseIcon from 'vue-material-design-icons/Close.vue'
-
-export default {
-	name: 'SearchFilterChip',
-	components: {
-		CloseIcon,
-	},
-
-	props: {
-		text: {
-			type: String,
-			required: true,
-		},
-
-		pretext: {
-			type: String,
-			required: true,
-		},
-	},
-
-	methods: {
-		deleteChip() {
-			this.$emit('delete', this.filter)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.chip {
-    display: flex;
-    align-items: center;
-    padding: 2px 4px;
-    border: 1px solid var(--color-primary-element-light);
-    border-radius: 20px;
-    background-color: var(--color-primary-element-light);
-    margin: 2px;
-
-    .icon {
-        display: flex;
-        align-items: center;
-        padding-inline-end: 5px;
-
-        img {
-            width: 20px;
-            padding: 2px;
-            border-radius: 20px;
-            filter: var(--background-invert-if-bright);
-        }
-    }
-
-    .text {
-        margin: 0 2px;
-    }
-
-    .close-icon {
-        cursor: pointer ;
-
-        :hover {
-            filter: invert(20%);
-        }
-    }
-}
-</style>
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchModal.vue b/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
index f4bc8db0dc9b1..b80427b17ff92 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
@@ -102,12 +102,13 @@
 				</NcCheckboxRadioSwitch>
 			</div>
 			<div class="unified-search-modal__filters-applied">
-				<FilterChip
+				<NcChip
 					v-for="filter in filters"
 					:key="filter.id"
 					:text="filter.name ?? filter.text"
 					pretext=""
-					@delete="removeFilter(filter)">
+					:aria-label-close="t('core', 'Remove filter: {text}', { text: filter.name ?? filter.text })"
+					@close="removeFilter(filter)">
 					<template #icon>
 						<NcAvatar
 							v-if="filter.type === 'person'"
@@ -117,9 +118,13 @@
 							hide-user-status
 							:hide-favorite="false" />
 						<IconCalendarRange v-else-if="filter.type === 'date'" />
-						<img v-else :src="filter.icon" alt="">
+						<img
+							v-else
+							:src="filter.icon"
+							class="unified-search-modal__filter-icon"
+							alt="">
 					</template>
-				</FilterChip>
+				</NcChip>
 			</div>
 		</div>
 
@@ -208,6 +213,7 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcChip from '@nextcloud/vue/components/NcChip'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
@@ -220,7 +226,6 @@ import IconListBox from 'vue-material-design-icons/ListBox.vue'
 import IconMagnify from 'vue-material-design-icons/Magnify.vue'
 import CustomDateRangeModal from './CustomDateRangeModal.vue'
 import SearchableList from './SearchableList.vue'
-import FilterChip from './SearchFilterChip.vue'
 import SearchResult from './SearchResult.vue'
 import { unifiedSearchLogger } from '../../logger.js'
 import { getContacts, getProviders, search as unifiedSearch } from '../../services/UnifiedSearchService.js'
@@ -238,11 +243,11 @@ export default defineComponent({
 		IconMagnify,
 
 		CustomDateRangeModal,
-		FilterChip,
 		NcActions,
 		NcActionButton,
 		NcAvatar,
 		NcButton,
+		NcChip,
 		NcEmptyContent,
 		NcDialog,
 		NcInputField,
@@ -936,6 +941,7 @@ export default defineComponent({
 		padding-top: 4px;
 		display: flex;
 		flex-wrap: wrap;
+		gap: 4px;
 	}
 
 	&__no-content {