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

vuejs · Apr 15, 2023 · 4449867 · 4449867
1 parent db32a26
commit 4449867
Showing 1 changed file with 14 additions and 6 deletions.
diff --git 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 {