Zudo Sg

Type to search...

to open search from anywhere

SearchToggleEnhancer

Render-null a11y island for SiteHeader's search toggle: syncs aria-expanded to real focus-within state, focuses the input on click/tap, and Escape collapses it. The input already expands on focus-within via pure CSS — mount this alongside SiteHeader (via the consumer's own Island with ssrFallback={null}) to layer the enhancement on top.

Navigation

Usage

import { SiteHeader } from "@zudo-sg/ui";
import SearchToggleEnhancer from "@zudo-sg/ui/src/chrome/search-toggle-enhancer/search-toggle-enhancer";

<SiteHeader />
<Island when="visible" ssrFallback={null}><SearchToggleEnhancer /></Island>
Click to focus, Escape to collapse