fix(a11y): increase touch target size of search icons

pull/2229/head
Divyansh Singh 2 years ago
parent db32a26ddc
commit 44498675ac

@ -313,7 +313,7 @@ useEventListener('popstate', (event) => {
<div class="shell">
<div class="search-bar" @pointerup="onSearchBarClick($event)">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24">
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
<g
fill="none"
stroke="currentColor"
@ -331,7 +331,7 @@ useEventListener('popstate', (event) => {
:title="$t('modal.backButtonTitle')"
@click="$emit('close')"
>
<svg width="16" height="16" viewBox="0 0 24 24">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
<path
fill="none"
stroke="currentColor"
@ -358,7 +358,7 @@ useEventListener('popstate', (event) => {
:title="$t('modal.displayDetails')"
@click="showDetailedList = !showDetailedList"
>
<svg width="16" height="16" viewBox="0 0 24 24">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
<path
fill="none"
stroke="currentColor"
@ -375,7 +375,7 @@ useEventListener('popstate', (event) => {
:title="$t('modal.resetButtonTitle')"
@click="filterText = ''"
>
<svg width="16" height="16" viewBox="0 0 24 24">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
<path
fill="none"
stroke="currentColor"
@ -407,7 +407,7 @@ useEventListener('popstate', (event) => {
<span class="title-icon">#</span>
<span v-for="(t, index) in p.titles" :key="index" class="title">
<span class="text" v-html="t" />
<svg width="16" height="16" viewBox="0 0 24 24">
<svg width="20" height="20" viewBox="0 0 24 24">
<path
fill="none"
stroke="currentColor"
@ -571,6 +571,13 @@ useEventListener('popstate', (event) => {
.search-actions {
display: flex;
gap: 4px;
}
@media (any-pointer: coarse) {
.search-actions {
gap: 8px;
}
}
@media (min-width: 769px) {
@ -580,7 +587,7 @@ useEventListener('popstate', (event) => {
}
.search-actions button {
padding: 8px 6px;
padding: 8px;
}
.search-actions button:hover,
@ -620,6 +627,7 @@ useEventListener('popstate', (event) => {
gap: 6px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.result {

Loading…
Cancel
Save