Search result focus improvements

src/static/css/site.css

@@ -657,7 +657,8 @@ summary .group-name {
   border-bottom: 1px solid var(--dim-color);
 }
 
-.wiki-search-result:hover::before {
+.wiki-search-result:hover::before,
+.wiki-search-result:focus::before {
   display: block;
   background: var(--light-ghost-color);
 }

src/static/js/client/sidebar-search.js

@@ -67,6 +67,8 @@ export const info = {
     tidiedSidebar: null,
     collapsedDetailsForTidiness: null,
 
+    currentValue: null,
+
     workerStatus: null,
     searchStage: null,
 
@@ -298,18 +300,33 @@ export function mutatePageContent() {
   info.searchBox.appendChild(info.endSearchLine);
 }
 
+function trackSidebarSearchInputChanged() {
+  const {state} = info;
+
+  const newValue = info.searchInput.value;
+
+  if (newValue === state.currentValue) {
+    return false;
+  } else {
+    state.currentValue = newValue;
+    return !!newValue;
+  }
+}
+
 export function addPageListeners() {
   if (!info.searchInput) return;
 
   info.searchInput.addEventListener('change', _domEvent => {
-    if (info.searchInput.value) {
+    if (trackSidebarSearchInputChanged()) {
       activateSidebarSearch(info.searchInput.value);
     }
   });
 
   info.searchInput.addEventListener('input', _domEvent => {
     const {settings, state} = info;
 
+    trackSidebarSearchInputChanged();
+
     if (!info.searchInput.value) {
       clearSidebarSearch();
       return;
@@ -325,6 +342,16 @@ export function addPageListeners() {
       }, settings.stoppedTypingDelay);
   });
 
+  info.searchInput.addEventListener('keydown', domEvent => {
+    if (domEvent.key === 'ArrowDown') {
+      const elem = info.results.firstChild;
+      if (elem?.classList?.contains?.('wiki-search-result')) {
+        domEvent.preventDefault();
+        elem.focus({focusVisible: true});
+      }
+    }
+  });
+
   info.endSearchLink.addEventListener('click', domEvent => {
     domEvent.preventDefault();
     clearSidebarSearch();
@@ -771,6 +798,24 @@ function generateSidebarSearchResultTemplate(slots) {
     saveSidebarSearchResultsScrollOffset();
   });
 
+  link.addEventListener('keydown', domEvent => {
+    if (domEvent.key === 'ArrowDown') {
+      const elem = link.nextElementSibling;
+      if (elem) {
+        domEvent.preventDefault();
+        elem.focus({focusVisible: true});
+      }
+    } else if (domEvent.key === 'ArrowUp') {
+      domEvent.preventDefault();
+      const elem = link.previousElementSibling;
+      if (elem) {
+        elem.focus({focusVisible: true});
+      } else {
+        info.searchInput.focus();
+      }
+    }
+  });
+
   return link;
 }