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

Loading…
Cancel
Save