feat: Access to Filters using keyboard - MEED-9239 - Meeds-io/MIPs#193 (#4916)

Author: sofyenne

webapp/src/main/webapp/vue-apps/search/components/SearchOptions.vue

@@ -26,6 +26,8 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
       :aria-pressed="favorites"
       :aria-label="$t('search.filter.favorite')"
       class="ms-1 me-2 text-body border-color flex-shrink-0"
+      tabindex="0"
+      @keydown.enter="$emit('select-favorites')"
       @click="$emit('select-favorites')">
       <v-icon size="16" class="pe-2 yellow--text text--darken-2">
         fas fa-star
@@ -47,7 +49,9 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
           :aria-label="$t('search.filter.type')"
           v-bind="attrs"
           v-on="on"
-          class="text-body text-header-color ms-2 flex-shrink-0">
+          tabindex="0"
+          class="text-body text-header-color ms-2 flex-shrink-0"
+          @keydown.enter="on.click">
           <v-icon size="16" class="pe-2">
             fas fa-paste
           </v-icon>

webapp/src/main/webapp/vue-apps/search/components/SearchTagList.vue

@@ -6,15 +6,18 @@
     :nudge-left="isMobile && 300"
     :nudge-bottom="30"
     content-class="tag-search-content"
+    attach
     offset-x>
     <template #activator="{ on, attrs }">
       <v-chip
         :outlined="!open"
         :color="open && 'primary' || ''"
         :aria-label="$t('search.filter.tag')"
+        tabindex="0"
         class="text-body text-header-color mx-1"
         v-bind="attrs"
-        v-on="on">
+        v-on="on"
+        @keydown.enter="on.click">
         <v-icon size="16" class="pe-2">
           fas fa-hashtag
         </v-icon>
@@ -25,6 +28,7 @@
       <v-text-field
         ref="tagSearchInput"
         v-model="query"
+        autofocus
         :placeholder="$t('Tag.search.placeholder')"
         class="px-4" />
       <div class="pa-3">
@@ -91,26 +95,11 @@ export default {
     open() {
       if (this.open) {
         this.query = '';
-        window.setTimeout(() => {
-          if (this.$refs.tagSearchInput) {
-            this.$refs.tagSearchInput.$el.querySelector('input').focus();
-          }
-        }, 200);
         this.search();
       }
     },
   },
   created() {
-    // Workaround to fix closing menu when clicking outside
-    document.onmousedown = event => {
-      if (this.open && event && event.target) {
-        if (!$('.tag-search-content').find(event.target).length) {
-          window.setTimeout(() => {
-            this.open = false;
-          }, 200);
-        }
-      }
-    };
     this.selectedTags = this.value;
   },
   methods: {