chore: Fixing Focus Order by Rearranging Element Sequence (#673)

* chore: Fixing Focus Order by Rearranging Element Sequence * hide results on focus
eslint · Jan 1, 2025 · 40ae6f8 · 40ae6f8
1 parent f7ec1f0
commit 40ae6f8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/_includes/components/search.html b/src/_includes/components/search.html
@@ -9,7 +9,16 @@
         <p class="visually-hidden" id="search-hint">{{ site.blog_page.search.hint }}</p>
         <div class="search__inner-input-wrapper">
             <input type="search" id="search" class="search__input" autocomplete="off" aria-describedby="search-hint" pattern="\S+">
-            <a class="search_powered-by-wrapper"  href="https://www.algolia.com/developers/?utm_source=eslint&amp;utm_medium=referral&amp;utm_content=powered_by&amp;utm_campaign=docsearch" target="_blank" rel="noopener noreferrer">
+            <div id="search-results" class="search-results"></div>
+            <button class="search__clear-btn" id="search__clear-btn" hidden>
+                <span class="visually-hidden">{{ site.blog_page.search.clear }}</span>
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
+                    <path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </button>
+            <a class="search_powered-by-wrapper"
+                href="https://www.algolia.com/developers/?utm_source=eslint&amp;utm_medium=referral&amp;utm_content=powered_by&amp;utm_campaign=docsearch"
+                target="_blank" rel="noopener noreferrer">
                 <div class="search__powered-by">
                     <span class="powered-by-text">Powered by</span>
                     <svg width="77" height="19" aria-label="Algolia" role="img" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
@@ -42,14 +51,7 @@
                     </svg>
                 </div>
             </a>
-            <button class="search__clear-btn" id="search__clear-btn" hidden>
-                <span class="visually-hidden">{{ site.blog_page.search.clear }}</span>
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
-                    <path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-            </button>
         </div>
     </div>
     <div id="search-results-announcement" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
-    <div id="search-results" class="search-results"></div>
 </div>
diff --git a/src/assets/js/search.js b/src/assets/js/search.js
@@ -24,9 +24,16 @@ const resultsLiveRegion = document.querySelector(
 );
 const searchInput = document.querySelector("#search");
 const searchClearBtn = document.querySelector("#search__clear-btn");
+const poweredByLink = document.querySelector(".search_powered-by-wrapper");
 let activeIndex = -1;
 let searchQuery;
 
+if (poweredByLink) {
+	poweredByLink.addEventListener("focus", function () {
+		clearSearchResults();
+	});
+}
+
 //-----------------------------------------------------------------------------
 // Helpers
 //-----------------------------------------------------------------------------