web: more a11y for search

web/src/components/search/SearchShell.tsx

@@ -1,11 +1,17 @@
 "use client";
-import { useEffect, useRef, useState, useTransition, type ReactNode } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { useRouter } from "next/navigation";
-import { PageHeader } from "../general/PageHeader";
 import { getSearchPath } from "@/lib/common";
-import styles from "./searchContainer.module.scss";
+import { useRouter } from "next/navigation";
+import {
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+  useTransition,
+} from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { Icon } from "../general/Icon";
+import { PageHeader } from "../general/PageHeader";
+import styles from "./searchContainer.module.scss";
 
 export function SearchShell({
   initialQuery,
@@ -35,22 +41,38 @@ export function SearchShell({
 
   return (
     <div className={styles.searchContainer}>
-      <PageHeader heading="Søk" />
-      <div className={styles.searchField}>
-        <input
-          name="query"
-          type="text"
-          autoFocus
-          value={inputValue}
-          onChange={(e) => {
-            setInputValue(e.target.value);
-            pushQuery(e.target.value);
-          }}
-        />
-        <div className={styles.searchIcon}>
-          <Icon type="search" />
+      <PageHeader heading={initialQuery ? `Søk: «${initialQuery}»` : "Søk"} />
+      <form
+        action="/sok"
+        method="get"
+        onSubmit={(e) => {
+          e.preventDefault();
+          pushQuery.cancel();
+          lastPushedRef.current = inputValue;
+          startTransition(() => {
+            replace(getSearchPath(inputValue));
+          });
+        }}
+      >
+        <div className={styles.searchField}>
+          <label htmlFor="search-query" className="sr-only">
+            Søk
+          </label>
+          <input
+            id="search-query"
+            name="q"
+            type="text"
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+              pushQuery(e.target.value);
+            }}
+          />
+          <div className={styles.searchIcon} aria-hidden="true">
+            <Icon type="search" />
+          </div>
         </div>
-      </div>
+      </form>
       {children}
     </div>
   );