From 1cce9e260a05fe9c1a6f397b0fc2eeea893ed17b Mon Sep 17 00:00:00 2001
From: Ricardo <ricardos8977@gmail.com>
Date: Wed, 30 Dec 2020 17:11:12 +0000
Subject: [PATCH] feat: aria friendly search & filter

---
 .../theme/components/blog/ActiveTags.vue      | 11 +++---
 .../blog/SearchCategoriesAndTags.vue          | 38 ++++++++++++++++++-
 src/.vuepress/theme/layouts/Blog.vue          |  6 ++-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/.vuepress/theme/components/blog/ActiveTags.vue b/src/.vuepress/theme/components/blog/ActiveTags.vue
index 46ac4a9a..3752b866 100644
--- a/src/.vuepress/theme/components/blog/ActiveTags.vue
+++ b/src/.vuepress/theme/components/blog/ActiveTags.vue
@@ -21,21 +21,22 @@
       >
     </span>
     <ul class="tags flex items-center" itemprop="keywords">
-      <li
+      <button
         v-for="tag in activeTags"
         :key="tag"
         class="multiselect__tag active-tag"
+        @click="tagClick(tag)"
       >
         <span>#{{ tag }}</span
-        ><i class="multiselect__tag-icon" @click="tagClick(tag)"></i>
-      </li>
+        ><i class="multiselect__tag-icon"></i>
+      </button>
     </ul>
-    <div
+    <button
       class="p-1 ml-auto opacity-50 hover:opacity-100 text-blueGreen transition transition-opacity duration-300 ease-in-out cursor-pointer"
       @click="handleClear()"
     >
       &#10005;
-    </div>
+    </button>
   </div>
 </template>
 
diff --git a/src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue b/src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue
index 445c7822..9431b60f 100644
--- a/src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue
+++ b/src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="flex items-center justify-between">
+  <div
+    class="flex items-center justify-between"
+    @keyup.left="handleKeyUp(-1)"
+    @keyup.right="handleKeyUp(1)"
+  >
     <div>Sort items by type:</div>
     <multiselect
+      ref="select0"
       v-model="selectedCat"
       class="flex-grow mx-2"
       :options="categories"
       :searchable="false"
       :allow-empty="false"
       deselect-label=""
+      @select="focusOnSubmit()"
+      @open="setSelected(0)"
     />
     <span>and/or</span>
     <multiselect
+      ref="select1"
       v-model="selectedTags"
       class="flex-grow mx-2 max-w-sm max-h-sm"
       tag-placeholder="search for this text"
@@ -21,11 +29,15 @@
       :multiple="true"
       :taggable="true"
       @tag="handleAddTag"
+      @select="focusOnSubmit()"
+      @open="setSelected(1)"
     ></multiselect>
 
     <button
+      ref="select2"
       class="p-2 text-white bg-blueGreen rounded opacity-75 hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
       @click="handleSearch"
+      @focus="setSelected(2)"
     >
       Search
     </button>
@@ -53,6 +65,7 @@ export default {
       selectedCat: this.categories[0],
       selectedTags: [],
       searchedWords: [],
+      selectedInput: 0,
     }
   },
   computed: {
@@ -81,6 +94,29 @@ export default {
         value: text,
       })
     },
+    focusOnSubmit() {
+      this.$refs.select2.focus()
+    },
+    handleKeyUp(switcher) {
+      const futureFocus = this.selectedInput + switcher
+      let futureIndex = 2
+
+      if (switcher === -1) {
+        futureIndex = futureFocus >= 0 ? futureFocus : 2
+      } else {
+        futureIndex = futureFocus <= 2 ? futureFocus : 0
+      }
+
+      if (futureIndex === 2) {
+        this.focusOnSubmit()
+        this.selectedInput = 2
+      } else {
+        this.$refs['select' + futureIndex].$el.focus()
+      }
+    },
+    setSelected(index) {
+      this.selectedInput = index
+    },
   },
 }
 </script>
diff --git a/src/.vuepress/theme/layouts/Blog.vue b/src/.vuepress/theme/layouts/Blog.vue
index 305b7934..e3c3b9eb 100644
--- a/src/.vuepress/theme/layouts/Blog.vue
+++ b/src/.vuepress/theme/layouts/Blog.vue
@@ -34,7 +34,11 @@
         />
       </div>
       <div
-        v-if="!infiniteScroll && pagesToShow.length < publicPages.length"
+        v-if="
+          mountFinish &&
+          !infiniteScroll &&
+          pagesToShow.length < publicPages.length
+        "
         class="flex justify-center mt-8 pb-4"
       >
         <button