検索ボックスSearch box

「検索ボックス（Search box）」を実装してください。

## これは何か
キーワードを入れて探す入力欄。虫眼鏡のアイコンと組で使われることが多い。

## 使いどころ
- ページ数が多く、メニューを辿るより探したほうが速いとき
- 一覧を絞り込ませたいとき

## 実装の要件
- form[role=search] > label + input[type=search] + button
- 送信ボタンにも「検索する」と名前を付ける
- 虫眼鏡アイコンだけにして、押すと入力欄が開く形は、探せることに気づかれにくい
- 何も入力せずに送信されたときの挙動を決めておく。空の検索結果ページに飛ばさない
- 入力中に結果を絞り込むなら、件数を必ず出す。0件のときに真っ白にしない

## アクセシビリティの要件
- role="search" を form に付ける。search 要素で囲むなら role は付けない（二重になる）
- label か aria-label で入力欄に名前を付ける。プレースホルダーだけにしない
- type="search" にすると Chrome・Safari は消去ボタンを出す（Firefox は出ない）。フォーム全体は search 要素で囲んでもよい
- 入力しながら結果が変わるときは、件数を aria-live="polite" で伝える

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<form class="x-search-box" role="search" action="/search/">
  <label class="x-search-box__l" for="x-search-box-q">サイト内を検索</label>
  <div class="x-search-box__row">
    <input class="x-search-box__i" id="x-search-box-q" type="search" name="q" placeholder="キーワード">
    <button class="x-search-box__b" type="submit" aria-label="検索する">
      <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
    </button>
  </div>
</form>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-search-box,
.x-search-box *:not([class*="fa-"]),
.x-search-box *:not([class*="fa-"])::before,
.x-search-box *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-search-box {
  width: 250px;
}
.x-search-box__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-search-box__row {
  display: flex;
  gap: 6px;
}
.x-search-box__i {
  /* Safari は type="search" に既定の外観を当て、枠と角丸を無視する */
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.x-search-box__b {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid #1d4ed8;
  border-radius: 8px;
  background: #1d4ed8;
  color: #fff;
  cursor: pointer;
}
.x-search-box__i:focus-visible,
.x-search-box__b:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。