fix: keyboard navigation

assets/css/icons.css

@@ -15,6 +15,7 @@
   --icon-arrow-up-s: "\ea78";
   --icon-arrow-down-s: "\ea4e";
   --icon-arrow-right-s: "\ea6e";
+  --icon-arrow-left-s: "\ea64";
   --icon-add: "\ea13";
   --icon-subtract: "\f1af";
   --icon-error-warning: "\eca1";
@@ -38,6 +39,7 @@
 .ri-arrow-up-s-line:before { content: var(--icon-arrow-up-s); }
 .ri-arrow-down-s-line:before { content: var(--icon-arrow-down-s); }
 .ri-arrow-right-s-line:before { content: var(--icon-arrow-right-s); }
+.ri-arrow-left-s-line:before { content: var(--icon-arrow-left-s); }
 .ri-search-2-line:before { content: var(--icon-search-2-line); }
 .ri-menu-line:before { content: var(--icon-menu-line); }
 .ri-close-line:before { content: var(--icon-close-line); }

assets/js/autocomplete/autocomplete-list.js

@@ -1,5 +1,5 @@
 import { getSuggestions } from './suggestions'
-import { isBlank, qs } from '../helpers'
+import { isBlank, qs, qsAll } from '../helpers'
 
 export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete'
 export const AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR = '.autocomplete-suggestions'
@@ -16,6 +16,15 @@ const state = {
  */
 export function showAutocompleteList () {
   qs(AUTOCOMPLETE_CONTAINER_SELECTOR).classList.add('shown')
+
+  const buttons = qsAll('.autocomplete-suggestion-preview-indicator')
+  buttons.forEach(button => {
+    button.addEventListener('click', event => {
+      event.preventDefault()
+      event.stopPropagation()
+      togglePreview()
+    })
+  })
 }
 
 /**
@@ -111,11 +120,37 @@ export function togglePreview () {
     showPreview(elementToSelect)
   } else {
     suggestionList.classList.remove('previewing')
-    const container = previewContainer()
+  }
+}
+
+function expandPreview () {
+  state.previewOpen = true
+  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
+  if (suggestionList) {
+    suggestionList.classList.add('previewing')
+  }
+}
+
+function closePreview () {
+  state.previewOpen = false
+  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
+  if (suggestionList) {
+    suggestionList.classList.remove('previewing')
+  }
+}
+
+export function removePreview () {
+  state.previewOpen = false
+  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
 
-    if (container) {
-      container.remove()
-    };
+  if (suggestionList) {
+    suggestionList.classList.remove('previewing')
+  }
+
+  const container = previewContainer()
+
+  if (container) {
+    container.remove()
   }
 }
 
@@ -138,6 +173,19 @@ function showPreview (elementToSelect) {
     iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups')
     iframe.setAttribute('src', previewHref)
     newContainer.replaceChildren(iframe)
+    iframe.onload = () => {
+      if (iframe.contentDocument) {
+        iframe.contentDocument.addEventListener('keydown', event => {
+          if (event.key === 'ArrowLeft') {
+            closePreview()
+            event.preventDefault()
+          } else if (event.key === 'ArrowRight') {
+            expandPreview()
+            event.preventDefault()
+          }
+        })
+      }
+    }
     elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling)
   } else {
     suggestionList.classList.remove('previewing')

assets/js/handlebars/templates/autocomplete-suggestions.handlebars

@@ -6,7 +6,8 @@
         Autocompletion results for <span class="bold">"{{term}}"</span>
       </span>
       <span class="press-return">
-        Press <span class="bold">RETURN</span> for full-text search, <span class="bold">TAB</span> for previews
+        Press <span class="bold">RETURN</span> for full-text search, <span class="bold">→</span> for expand previews,
+        <span class="bold">←</span> for close previews
       </span>
     </div>
     <div>
@@ -22,14 +23,14 @@
           {{#each labels}}
           <span class="label">{{this}}</span>
           {{/each}}
-          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open" onclick="togglePreview()">
+          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open">
             <button type="button">
-              Close Preview
+              <span class="ri-arrow-left-s-line" /> Close Preview
             </button>
           </div>
-          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed" onclick="togglePreview()">
+          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed">
             <button type="button">
-              Open Preview <span class="ri-arrow-right-s-line"/>
+              Open Preview <span class="ri-arrow-right-s-line" />
             </button>
           </div>
         </div>
@@ -43,4 +44,4 @@
       {{/each}}
     </div>
   </div>
-</div>
+</div>

assets/js/search-bar.js

@@ -6,7 +6,8 @@ import {
   togglePreview,
   updateAutocompleteList,
   AUTOCOMPLETE_CONTAINER_SELECTOR,
-  AUTOCOMPLETE_SUGGESTION_SELECTOR
+  AUTOCOMPLETE_SUGGESTION_SELECTOR,
+  removePreview
 } from './autocomplete/autocomplete-list'
 import { isMacOS, qs } from './helpers'
 
@@ -67,7 +68,7 @@ function addEventListeners () {
     } else if (event.key === 'ArrowDown' || (macOS && event.ctrlKey && event.key === 'n')) {
       moveAutocompleteSelection(1)
       event.preventDefault()
-    } else if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+    } else if (event.key === 'ArrowRight') {
       togglePreview()
       event.preventDefault()
     }
@@ -79,6 +80,7 @@ function addEventListeners () {
 
   searchInput.addEventListener('focus', event => {
     document.body.classList.add('search-focused')
+    removePreview()
     updateAutocompleteList(event.target.value)
   })