search result keyboard focus

1 files changed, 32 insertions, 4 deletions

diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js
index 9d2cae34..917b9c12 100644
--- a/src/static/js/client/sidebar-search.js
+++ b/src/static/js/client/sidebar-search.js
@@ -329,6 +329,16 @@ export function addPageListeners() {
 
   info.searchInput.addEventListener('drop', handleDroppedIntoSearchInput);
 
+  info.searchInput.addEventListener('keydown', domEvent => {
+    if (domEvent.key === 'ArrowDown' && info.searchInput.value.length === info.searchInput.selectionStart) {
+      const elem = info.results?.firstChild;
+      if (elem && !elem.classList.contains('wiki-search-no-results')) {
+        domEvent.preventDefault();
+        elem.focus();
+      }
+    }
+  });
+
   info.endSearchLink.addEventListener('click', domEvent => {
     domEvent.preventDefault();
     clearSidebarSearch();
@@ -593,7 +603,7 @@ function showSidebarSearchResults(results) {
   }
 
   for (const result of flatResults) {
-    const el = generateSidebarSearchResult(result);
+    const el = generateSidebarSearchResult(result, info);
     if (!el) continue;
 
     info.results.appendChild(el);
@@ -609,7 +619,7 @@ function showSidebarSearchResults(results) {
   restoreSidebarSearchResultsScrollOffset();
 }
 
-function generateSidebarSearchResult(result) {
+function generateSidebarSearchResult(result, info) {
   const preparedSlots = {
     color:
       result.data.color ?? null,
@@ -680,7 +690,7 @@ function generateSidebarSearchResult(result) {
       return null;
   }
 
-  return generateSidebarSearchResultTemplate(preparedSlots);
+  return generateSidebarSearchResultTemplate(preparedSlots, info);
 }
 
 function getSearchResultImageSource(result) {
@@ -693,7 +703,7 @@ function getSearchResultImageSource(result) {
       'rebaseThumb'));
 }
 
-function generateSidebarSearchResultTemplate(slots) {
+function generateSidebarSearchResultTemplate(slots, info) {
   const link = document.createElement('a');
   link.classList.add('wiki-search-result');
 
@@ -775,6 +785,24 @@ function generateSidebarSearchResultTemplate(slots) {
     saveSidebarSearchResultsScrollOffset();
   });
 
+  link.addEventListener('keydown', domEvent => {
+    if (domEvent.key === 'ArrowDown') {
+      const elem = link.nextElementSibling;
+      if (elem) {
+        domEvent.preventDefault();
+        elem.focus();
+      }
+    } else if (domEvent.key === 'ArrowUp') {
+      domEvent.preventDefault();
+      const elem = link.previousElementSibling;
+      if (elem) {
+        elem.focus();
+      } else {
+        info.searchInput.focus();
+      }
+    }
+  });
+
   return link;
 }