From 501fa3721a1e5a61c3c7d0879aa8f12a2f964733 Mon Sep 17 00:00:00 2001 From: AshmitSherigar Date: Wed, 23 Jul 2025 17:18:36 +0530 Subject: [PATCH 1/4] 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(null); + const clearButtonRef = useRef(null); + const submitButtonRef = useRef(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 = () => ( + + { + 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 ? ( + + ) : ( + + )} + + ); + const renderFilterByOptions = () => { - if (results.length === 0) { - return null; - } + if (results.length === 0) return null; return (
@@ -71,7 +121,11 @@ const SearchResults = ({ {allUniqueCategoriesForResults.map((category) => (
  • - ) : ( - - )} - - ); - }; - const renderResults = () => { if (results.length === 0) { return ( @@ -181,13 +178,14 @@ const SearchResults = ({ return (
    -

    {results.length} results found for

    +

    + {results.length} results found for +

    {renderBigSearchForm()}
    {renderFilterByOptions()}
    - {renderResults()}
    ); From 204f3620ea821fb859c46bb52b88c48ab9b26919 Mon Sep 17 00:00:00 2001 From: AshmitSherigar Date: Fri, 25 Jul 2025 11:11:13 +0530 Subject: [PATCH 2/4] fix : Menu list automatically expands on Tab key navigation but is not visible --- src/components/Nav/MainNavLinks.tsx | 35 +++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx index 0e3b628535..5b94bdfa16 100644 --- a/src/components/Nav/MainNavLinks.tsx +++ b/src/components/Nav/MainNavLinks.tsx @@ -1,6 +1,7 @@ import styles from "./styles.module.scss"; import { Logo } from "../Logo"; import { Icon } from "../Icon"; +import { useEffect, useRef } from "preact/hooks"; type MainNavLinksProps = { links: { @@ -26,6 +27,38 @@ export const MainNavLinks = ({ isOpen, hasJumpTo, }: MainNavLinksProps) => { + //Fix : Menu list automatically expands on Tab key navigation but is not visible + const menuRef = useRef(null); + const buttonRef = useRef(null); + + useEffect(() => { + const handleKeyDown = (e : KeyboardEvent) => { + if (e.key === "Tab"){ + requestAnimationFrame(()=>{ + const active = document.activeElement; + if (menuRef.current && buttonRef.current && !menuRef.current.contains(active as Node) && !buttonRef.current.contains(active as Node)) { + + if (isOpen){ + handleToggle(); + } + + } + }); + } + }; + + document.addEventListener("keydown",handleKeyDown); + + + + return () => { + document.removeEventListener("keydown",handleKeyDown) + } + }, [isOpen , handleToggle]) + + + + if (!links || links?.length <= 0) return null; const renderLogo = () => ( @@ -43,6 +76,7 @@ export const MainNavLinks = ({