From 501fa3721a1e5a61c3c7d0879aa8f12a2f964733 Mon Sep 17 00:00:00 2001
From: AshmitSherigar <sherigarashmit@gmail.com>
Date: Wed, 23 Jul 2025 17:18:36 +0530
Subject: [PATCH] fix:focus accessibility problem for screen reader and
 keyboard

---
 src/components/SearchResults/index.tsx | 168 ++++++++++++-------------
 1 file changed, 83 insertions(+), 85 deletions(-)

diff --git a/src/components/SearchResults/index.tsx b/src/components/SearchResults/index.tsx
index b3bc9673ef..f02eaafccf 100644
--- a/src/components/SearchResults/index.tsx
+++ b/src/components/SearchResults/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "preact/hooks";
+import { useMemo, useRef, useState, useEffect } from "preact/hooks";
 import { Icon } from "../Icon";
 
 type SearchResult = {
@@ -23,46 +23,96 @@ const SearchResults = ({
   uiTranslations,
 }: SearchResultProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
   const [currentFilter, setCurrentFilter] = useState("");
   const [isInputEdited, setInputEdited] = useState(false);
 
+  useEffect(() => {
+    if (searchTerm && clearButtonRef.current) {
+      clearButtonRef.current.focus();
+    } else if (!searchTerm && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [searchTerm]);
+
   const allUniqueCategoriesForResults = useMemo(() => {
     const categories = results.map((result) => result.category);
     return [...new Set(categories)];
   }, [results]);
 
   const uniqueCategories = useMemo(() => {
-    if (currentFilter) {
-      return [currentFilter];
-    }
-    return allUniqueCategoriesForResults;
+    return currentFilter ? [currentFilter] : allUniqueCategoriesForResults;
   }, [currentFilter, allUniqueCategoriesForResults]);
 
-  const uiTranslationKey = (category: string) => {
-    return (
-      category
-        // words in a category slugs are separated by dashes
-        .split("-")
-        .map((word) => {
-          // Capitalize the first letter of the word
-          return word.charAt(0).toUpperCase() + word.slice(1);
-        })
-        .join(" ")
-    );
-  };
+  const uiTranslationKey = (category: string) =>
+    category
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
 
   const toggleFilter = (category: string) => {
-    if (currentFilter === category) {
-      setCurrentFilter("");
-    } else {
-      setCurrentFilter(category);
-    }
+    setCurrentFilter((prev) => (prev === category ? "" : category));
   };
 
+  const clearInput = () => {
+    if (inputRef.current) inputRef.current.value = "";
+    setInputEdited(false);
+    onSearchChange("");
+  };
+
+  const submitInput = () => {
+    if (inputRef.current) onSearchChange(inputRef.current.value);
+  };
+
+  const renderBigSearchForm = () => (
+    <search
+      role="search"
+      class="bg-body-color relative flex h-[64px] w-full items-center rounded-[50px] border border-sidebar-type-color"
+    >
+      <input
+        id="search-term"
+        type="search"
+        ref={inputRef}
+        value={searchTerm}
+        placeholder={uiTranslations["Search"]}
+        onKeyDown={(e) => {
+          setInputEdited(true);
+          if (e.key === "Enter") {
+            e.preventDefault();
+            submitInput();
+          }
+        }}
+        class="h-fit w-full appearance-none bg-transparent px-md text-4xl placeholder-sidebar-type-color focus:outline-0"
+        aria-label="Search through site content"
+        required
+      />
+      {isInputEdited ? (
+        <button
+          ref={submitButtonRef}
+          type="submit"
+          class="absolute right-0 top-[2px] px-[22px] py-[13px]"
+          onClick={submitInput}
+          aria-label="Submit search"
+        >
+          <Icon kind="arrow-lg" />
+        </button>
+      ) : (
+        <button
+          ref={clearButtonRef}
+          type="reset"
+          class="absolute right-0 top-0 px-[22px] py-[13px]"
+          onClick={clearInput}
+          aria-label="Clear search input"
+        >
+          <Icon kind="close-lg" />
+        </button>
+      )}
+    </search>
+  );
+
   const renderFilterByOptions = () => {
-    if (results.length === 0) {
-      return null;
-    }
+    if (results.length === 0) return null;
 
     return (
       <div className="flex w-fit py-lg">
@@ -71,7 +121,11 @@ const SearchResults = ({
           {allUniqueCategoriesForResults.map((category) => (
             <li
               key={category}
-              className={`${currentFilter === category ? "bg-sidebar-type-color text-bg-color" : "bg-bg-color text-sidebar-type-color"} h-[25px] rounded-[20px] border border-sidebar-type-color px-xs py-[0.1rem] hover:bg-sidebar-type-color hover:text-bg-color md:h-[30px]`}
+              className={`${
+                currentFilter === category
+                  ? "bg-sidebar-type-color text-bg-color"
+                  : "bg-bg-color text-sidebar-type-color"
+              } h-[25px] rounded-[20px] border border-sidebar-type-color px-xs py-[0.1rem] hover:bg-sidebar-type-color hover:text-bg-color md:h-[30px]`}
             >
               <button
                 value={category}
@@ -94,63 +148,6 @@ const SearchResults = ({
     );
   };
 
-  const clearInput = () => {
-    if (inputRef.current) {
-      inputRef.current.value = "";
-    }
-  };
-  const submitInput = () => {
-    if (inputRef.current) {
-      onSearchChange(inputRef.current.value);
-    }
-  };
-
-  const renderBigSearchForm = () => {
-    return (
-      <search
-        role="search"
-        class="bg-body-color relative flex h-[64px] w-full items-center rounded-[50px] border border-sidebar-type-color"
-      >
-        <input
-          id="search-term"
-          type="search"
-          ref={inputRef}
-          value={searchTerm}
-          placeholder={uiTranslations["Search"]}
-          onKeyDown={(e) => {
-            setInputEdited(true);
-            if (e.key === "Enter") {
-              e.preventDefault();
-              submitInput();
-            }
-          }}
-          class="h-fit w-full appearance-none bg-transparent px-md text-4xl placeholder-sidebar-type-color focus:outline-0"
-          aria-label="Search through site content"
-          required
-        />
-        {isInputEdited ? (
-          <button
-            type="submit"
-            class="absolute right-0 top-[2px] px-[22px] py-[13px]"
-            onClick={submitInput}
-            aria-label="Submit search"
-          >
-            <Icon kind="arrow-lg" />
-          </button>
-        ) : (
-          <button
-            type="reset"
-            class="absolute right-0 top-0 px-[22px] py-[13px]"
-            onClick={clearInput}
-            aria-label="Clear search input"
-          >
-            <Icon kind="close-lg" />
-          </button>
-        )}
-      </search>
-    );
-  };
-
   const renderResults = () => {
     if (results.length === 0) {
       return (
@@ -181,13 +178,14 @@ const SearchResults = ({
   return (
     <div className="py-2xl md:py-3xl">
       <div class="sticky top-0 bg-bg-color">
-        <p className="mt-0 pb-xs pt-md">{results.length} results found for</p>
+        <p className="mt-0 pb-xs pt-md">
+          {results.length} results found for
+        </p>
         {renderBigSearchForm()}
       </div>
       <div className="no-scrollbar w-full overflow-x-scroll">
         {renderFilterByOptions()}
       </div>
-
       {renderResults()}
     </div>
   );