Improve accesibility for search tags/chips

- Use stand font of filter tags/chips
- No bold
- Use close icon and no close thick

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

1 files changed, 11 insertions, 7 deletions

diff --git a/core/src/components/GlobalSearch/SearchFilterChip.vue b/core/src/components/GlobalSearch/SearchFilterChip.vue
index 08e0dedfe14..8342e9e256d 100644
--- a/core/src/components/GlobalSearch/SearchFilterChip.vue
+++ b/core/src/components/GlobalSearch/SearchFilterChip.vue
@@ -6,13 +6,13 @@
 		</span>
 		<span class="text">{{ text }}</span>
 		<span class="close-icon" @click="deleteChip">
-			<CloseIcon :size="16" />
+			<CloseIcon :size="18" />
 		</span>
 	</div>
 </template>
 
 <script>
-import CloseIcon from 'vue-material-design-icons/CloseThick.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 export default {
 	name: 'SearchFilterChip',
@@ -20,8 +20,14 @@ export default {
 		CloseIcon,
 	},
 	props: {
-		text: String,
-		pretext: String,
+		text: {
+			type: String,
+			required: true,
+		},
+		pretext: {
+			type: String,
+			required: true,
+		},
 	},
 	methods: {
 		deleteChip() {
@@ -40,8 +46,6 @@ export default {
     border-radius: 20px;
     background-color: var(--color-primary-element-light);
     margin: 2px;
-    font-size: 10px;
-    font-weight: bolder;
 
     .icon {
         display: flex;
@@ -61,7 +65,7 @@ export default {
     }
 
     .close-icon {
-        cursor: pointer;
+        cursor: pointer ;
 
         :hover {
             filter: invert(20%);