Navigate search modal using up and down keys

CHANGELOG.md

@@ -5,6 +5,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added 
+
+* In the HTML output, the search modal can now be navigated using using up and down keys. ([#2761])
+
 ### Changed
 
 * Created a warning for when the search index size is too big (500Kib). ([#2423], [#2753])
@@ -2139,6 +2143,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2748]: https://github.com/JuliaDocs/Documenter.jl/issues/2748
 [#2750]: https://github.com/JuliaDocs/Documenter.jl/issues/2750
 [#2753]: https://github.com/JuliaDocs/Documenter.jl/issues/2753
+[#2761]: https://github.com/JuliaDocs/Documenter.jl/issues/2761
 [JuliaLang/julia#36953]: https://github.com/JuliaLang/julia/issues/36953
 [JuliaLang/julia#38054]: https://github.com/JuliaLang/julia/issues/38054
 [JuliaLang/julia#39841]: https://github.com/JuliaLang/julia/issues/39841

assets/html/js/shortcut.js

@@ -24,12 +24,21 @@ $(document).ready(function () {
   `;
 
   let search_modal_footer = `
-    <footer class="modal-card-foot">
-      <span>
-        <kbd class="search-modal-key-hints">Ctrl</kbd> +
-        <kbd class="search-modal-key-hints">/</kbd> to search
-      </span>
-      <span class="ml-3"> <kbd class="search-modal-key-hints">esc</kbd> to close </span>
+    <footer class="modal-card-foot is-flex is-justify-content-space-between is-align-items-center">
+      <div class="is-flex gap-3 is-flex-wrap-wrap">
+        <span>
+          <kbd class="search-modal-key-hints">Ctrl</kbd> +
+          <kbd class="search-modal-key-hints">/</kbd> to search
+        </span>
+        <span> <kbd class="search-modal-key-hints">esc</kbd> to close </span>
+      </div>
+      <div class="is-flex gap-3 is-flex-wrap-wrap">
+        <span>
+          <kbd class="search-modal-key-hints">↑</kbd>
+          <kbd class="search-modal-key-hints">↓</kbd> to navigate
+        </span>
+        <span> <kbd class="search-modal-key-hints">Enter</kbd> to select </span>
+      </div>
     </footer>
   `;
 
@@ -80,9 +89,33 @@ $(document).ready(function () {
       openModal();
     } else if (event.key === "Escape") {
       closeModal();
+    } else if (
+      document.querySelector("#search-modal")?.classList.contains("is-active")
+    ) {
+      const searchResults = document.querySelectorAll(".search-result-link");
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        if (searchResults.length > 0) {
+          const currentFocused = document.activeElement;
+          const currentIndex =
+            Array.from(searchResults).indexOf(currentFocused);
+          const nextIndex =
+            currentIndex < searchResults.length - 1 ? currentIndex + 1 : 0;
+          searchResults[nextIndex].focus();
+        }
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        if (searchResults.length > 0) {
+          const currentFocused = document.activeElement;
+          const currentIndex =
+            Array.from(searchResults).indexOf(currentFocused);
+          const prevIndex =
+            currentIndex > 0 ? currentIndex - 1 : searchResults.length - 1;
+          searchResults[prevIndex].focus();
+        }
+      }
     }
-
-    return false;
   });
 
   //event listener for the link icon to copy the URL

assets/html/scss/catppuccin.scss

@@ -95,6 +95,7 @@ $input-background-color: $body-background-color;
 $input-border-color: $border;
 $input-placeholder-color: #868c98;
 
+$search-result-link-border-color: $catppuccin-teal;
 $search-result-link-text-color: #333;
 $search-result-link-text-background-color: #f1f5f9;
 $search-result-title-text-color: whitesmoke;

assets/html/scss/documenter-dark.scss

@@ -74,6 +74,7 @@ $input-background-color: $body-background-color;
 $input-border-color: $border;
 $input-placeholder-color: #868c98;
 
+$search-result-link-border-color: #00d4aa;
 $search-result-link-text-color: #333;
 $search-result-link-text-background-color: #f1f5f9;
 $search-result-title-text-color: whitesmoke;

assets/html/scss/documenter/_variables.scss

@@ -102,6 +102,7 @@ $documenter-docstring-body-padding: $documenter-docstring-body-padding-v $docume
 
 // Search Results variables
 $search-result-link-hover: rgba(0, 128, 128, 0.1) !default;
+$search-result-link-border-color: #1DD2AF !default;
 $search-result-link-text-color: #f1f5f9 !default;
 $search-result-link-text-background-color: #333 !default;
 $search-result-title-text-color: #333 !default;

assets/html/scss/documenter/layout/_search.scss

@@ -29,10 +29,13 @@ kbd.search-modal-key-hints {
 .search-result-link {
   border-radius: 0.7em;
   transition: all 300ms;
+  border: 1px solid transparent
 }
 
 .search-result-link:hover, .search-result-link:focus {
   background-color: $search-result-link-hover;
+  outline : none;
+  border-color: $search-result-link-border-color;
 }
 
 .search-result-link .property-search-result-badge {

test/search/run_benchmarks.jl

@@ -124,10 +124,6 @@ function run_benchmarks(search_index_path::String, query_file_path::String, over
     precision_highlighter = Highlighter((data, i, j) -> i == 1 && j == 2, get_color_for_percentage(precision_val))
     recall_highlighter = Highlighter((data, i, j) -> i == 2 && j == 2, get_color_for_percentage(recall_val))
     f1_highlighter = Highlighter((data, i, j) -> i == 3 && j == 2, get_color_for_percentage(f1_val))
-    diff_highlighter = Highlighter(
-        (data, i, j) -> j == 4 && i in 1:3,
-        (data, i, j) -> get_color_for_diff(parse(Float64, data[i, 4]))
-    )
 
     pretty_table(
         summary_data, header = ["Metric", "Value", "Reference", "Diff"], alignment = :l,
@@ -136,9 +132,9 @@ function run_benchmarks(search_index_path::String, query_file_path::String, over
             precision_highlighter,
             recall_highlighter,
             f1_highlighter,
-            Highlighter((data, i, j) -> j == 4 && i in 1:3, get_color_for_diff(parse(Float64, summary_data[1, 4]))),
-            Highlighter((data, i, j) -> j == 4 && i in 1:3, get_color_for_diff(parse(Float64, summary_data[2, 4]))),
-            Highlighter((data, i, j) -> j == 4 && i in 1:3, get_color_for_diff(parse(Float64, summary_data[3, 4]))),
+            Highlighter((data, i, j) -> j == 4 && i == 1, get_color_for_diff(precision_diff)),
+            Highlighter((data, i, j) -> j == 4 && i == 2, get_color_for_diff(recall_diff)),
+            Highlighter((data, i, j) -> j == 4 && i == 3, get_color_for_diff(f1_diff)),
         )
     )