From 41b8f490e3b996a76531838dbaaaa986cefd43fe Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 17 May 2024 12:43:56 +0200
Subject: [PATCH] Fix microinteractions global search [SCI-10693]

---
 .../shared_styles/elements/checkboxes.scss    |  6 ++++-
 .../vue/global_search/container.vue           | 27 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
index f2a7850fe..2fbc657b8 100644
--- a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
+++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
@@ -78,10 +78,14 @@ input[type="checkbox"].sci-checkbox {
   }
 
   &:focus {
-    outline: none;
+    outline: 0;
     outline-offset: 0;
   }
 
+  &:focus + .sci-checkbox-label {
+    outline: 4px solid var(--sn-science-blue-hover);
+  }
+
   &:disabled {
     cursor: default;
 
diff --git a/app/javascript/vue/global_search/container.vue b/app/javascript/vue/global_search/container.vue
index 2d2f69e74..5ef2e5af2 100644
--- a/app/javascript/vue/global_search/container.vue
+++ b/app/javascript/vue/global_search/container.vue
@@ -17,6 +17,7 @@
               class="!pr-9"
               :value="localQuery"
               @change="changeQuery"
+              @keydown="focusHistoryItem"
               @keydown.enter="changeQuery"
               @blur="changeQuery"
               :placeholder="i18n.t('nav.search')"
@@ -30,9 +31,10 @@
         <template v-slot:flyout >
           <div v-for="(query, i) in reversedPreviousQueries" @click="setQuery(query)" :key="i"
               ref="historyItems"
+              @keydown="focusHistoryItem"
               tabindex="1"
               @keydown.enter="setQuery(query)"
-              class="flex px-3 h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
+              class="flex px-3 min-h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
             <i class="sn-icon sn-icon-history-search"></i>
             {{ query }}
           </div>
@@ -169,6 +171,7 @@ export default {
       previousQueries: [],
       invalidQuery: false,
       activeGroup: null,
+      focusedHistoryItem: null,
       totalElements: 0,
       searchGroups: [
         'FoldersComponent',
@@ -304,6 +307,28 @@ export default {
       this.activeGroup = null;
       this.filters.group = null;
     },
+    focusHistoryItem(event) {
+      if (this.focusedHistoryItem === null && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        this.focusedHistoryItem = 0;
+        this.$refs.historyItems[this.focusedHistoryItem].focus();
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        this.focusedHistoryItem += 1;
+        if (this.focusedHistoryItem >= this.$refs.historyItems.length) {
+          this.focusedHistoryItem = 0;
+        }
+        this.$refs.historyItems[this.focusedHistoryItem].focus();
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        this.focusedHistoryItem -= 1;
+        if (this.focusedHistoryItem < 0) {
+          this.focusedHistoryItem = this.$refs.historyItems.length - 1;
+        }
+        this.$refs.historyItems[this.focusedHistoryItem].focus();
+      } else if (event.key === 'Escape') {
+        this.$refs.historyContainer.isOpen = false;
+      }
+    },
     resetFilters() {
       this.filters = {
         created_at: {