docs: Fix Keyboard Navigation for Search Results (#19416)

amareshsm · web-flow · commit b476a930bb3a · 2025-02-10T16:14:06.000-05:00
* docs: Fix Keyboard Navigation for Search Results

* remove explicit tab key handling
diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js
@@ -199,7 +199,6 @@ if (searchInput)
         }
 
         searchQuery = query
-
     });
 
 
@@ -218,17 +217,15 @@ if (poweredByLink) {
 }
 
 document.addEventListener('keydown', function (e) {
-
     const searchResults = Array.from(document.querySelectorAll('.search-results__item'));
+    const isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown";
 
     if (e.key === "Escape") {
         e.preventDefault();
         if (searchResults.length) {
             clearSearchResults(true);
             searchInput.focus();
-        } else if (
-            document.activeElement === searchInput
-        ) {
+        } else if (document.activeElement === searchInput) {
             clearNoResults();
             searchInput.blur();
         }
@@ -242,21 +239,23 @@ document.addEventListener('keydown', function (e) {
 
     if (!searchResults.length) return;
 
-    switch (e.key) {
-        case "ArrowUp":
-            e.preventDefault();
+    if (isArrowKey) {
+        e.preventDefault();
+
+        if (e.key === "ArrowUp") {
             activeIndex = activeIndex - 1 < 0 ? searchResults.length - 1 : activeIndex - 1;
-            break;
-        case "ArrowDown":
-            e.preventDefault();
+        } else if (e.key === "ArrowDown") {
             activeIndex = activeIndex + 1 < searchResults.length ? activeIndex + 1 : 0;
-            break;
-    }
+        }
+
+        if (activeIndex !== -1) {
+            const activeSearchResult = searchResults[activeIndex];
+            activeSearchResult.querySelector('a').focus();
 
-    if (activeIndex === -1) return;
-    const activeSearchResult = searchResults[activeIndex];
-    activeSearchResult.querySelector('a').focus();
-    if (isScrollable(resultsElement)) {
-        maintainScrollVisibility(activeSearchResult, resultsElement);
+            if (isScrollable(resultsElement)) {
+                maintainScrollVisibility(activeSearchResult, resultsElement);
+            }
+        }
     }
 });
+
