From 44498675aca3271596b041881d44e1524d744df6 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 16 Apr 2023 02:42:38 +0530
Subject: [PATCH] fix(a11y): increase touch target size of search icons

---
 .../components/VPLocalSearchBox.vue           | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index 316df0d0..d50e5c2a 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -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 {