fix: make unified filter chip accessible

Signed-off-by: Kristian Zendato <kristian.zendato@nextcloud.com>

Author: kristian-zendato

core/src/components/UnifiedSearch/SearchFilterChip.vue

@@ -108,12 +108,12 @@
 						</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'"
@@ -123,9 +123,13 @@
 									hideUserStatus
 									:hideFavorite="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>
 
@@ -222,6 +226,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 NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconAccountGroup from 'vue-material-design-icons/AccountGroupOutline.vue'
@@ -234,7 +239,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 { useUnifiedSearch } from '../../composables/useUnifiedSearch.ts'
 import { unifiedSearchLogger } from '../../logger.js'
@@ -254,11 +258,11 @@ export default defineComponent({
 		IconMagnify,
 
 		CustomDateRangeModal,
-		FilterChip,
 		NcActions,
 		NcActionButton,
 		NcAvatar,
 		NcButton,
+		NcChip,
 		NcEmptyContent,
 		NcCheckboxRadioSwitch,
 		NcTextField,
@@ -1113,6 +1117,14 @@ export default defineComponent({
 		padding-top: 4px;
 		display: flex;
 		flex-wrap: wrap;
+		gap: var(--default-grid-baseline);
+	}
+
+	&__filter-icon {
+		width: 20px;
+		height: 20px;
+		object-fit: contain;
+		filter: var(--background-invert-if-bright);
 	}
 
 	&__no-content {

core/src/components/UnifiedSearch/UnifiedSearchModal.vue

@@ -0,0 +1 @@
+6692-6692.js.license