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 <[email protected]>
nextcloud · Nov 30, 2023 · 6fa6170 · 6fa6170
1 parent eeaf2a0
commit 6fa6170
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/core/src/components/GlobalSearch/SearchFilterChip.vue b/core/src/components/GlobalSearch/SearchFilterChip.vue
@@ -6,22 +6,28 @@
 		</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',
 	components: {
 		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%);