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>
pull/41781/head
fenn-cs 2023-11-27 20:03:23 +07:00 committed by Andy Scherzinger
parent 6e3781b486
commit 1fe7ba57c8
No known key found for this signature in database
GPG Key ID: 6CADC7E3523C308B
1 changed files with 11 additions and 7 deletions

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