app/components/search-trigger.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/components/theme-toggle.tsx. Imported by app/components/site-header.tsx.

Source

1import { Link } from "react-router";
2
3import { ENHANCE_URLS } from "~/components/enhance";
4import { HeaderTip } from "~/components/theme-toggle";
5import paletteDialogCss from "~/styles/palette-dialog.css?url";
6import askCss from "~/styles/ask.css?url";
7
8/**
9 * The shortcut hint ships `hidden` and `theme.ts` unhides it once the listener is attached, so a
10 * reader without script is never promised a shortcut. `data-palette` sits on the trigger, not the
11 * document, so a page without this component has no palette rather than a broken one. The URL is
12 * the palette bundle's, fetched on the gesture, never a <script> on the page.
13 */
14// One constant for the id, because a mismatched `aria-describedby` stops being announced silently.
15const HINT_ID = "search-shortcut-hint";
16
17export function SearchTrigger() {
18  return (
19    <>
20      <Link
21        to="/search"
22        className="cap-site-header-icon search-trigger"
23        data-search-trigger=""
24        data-palette={ENHANCE_URLS.palette}
25        data-palette-css={`${paletteDialogCss},${askCss}`}
26        aria-label="Search"
27        aria-describedby={HINT_ID}
28      >
29        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
30          <circle cx="11" cy="11" r="7" />
31          <path d="M20 20l-3.5-3.5" />
32        </svg>
33        {/* No keys here: theme.ts adds the platform's once it is listening for them. */}
34        <HeaderTip text="Search" />
35      </Link>
36      {/* Outside the anchor, or it would join the link's own content. */}
37      {/* A placeholder: the chord is platform-dependent, so `theme.ts` writes the real text before it unhides this. */}
38      <span id={HINT_ID} className="sr-only" data-search-hint="" hidden>
39        Search
40      </span>
41    </>
42  );
43}