インプット（検索）
componentキーワードを入力して検索するための入力欄です。入力した文字は × ボタンでまとめて消せます。検索は「検索」ボタン（sm は虫眼鏡のボタン）か Enter で確定してから実行し、入力のたびには実行しません。
size × state
valid (isInvalid=false)
isInvalid=true
bg negative/50 · border 2px negative/500
検索は送信ボタンか Enter で確定してから
全サイズで <form role="search"> で包み、送信ボタン（sm は虫眼鏡のアイコンボタン search-input-submit-icon、md / lg は「検索」ボタン）か Enter で確定してから検索する。入力のたびには検索しない（1 文字ごとに結果と件数の告知が変わり、入力中の文字と重なって聞き取れないため）。クリア（×）は押したら検索前に戻してよい
機能
このコンポーネントの用途
フリーワード検索の入力。クリア（×）と送信（検索）を内蔵。
検索は送信ボタンか Enter で確定してから実行し、入力のたびには実行しない（全サイズ共通）。
通常の 1 行入力は search-input ではなく input。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓type="search" の入力欄を <form role="search"> で包み、送信ボタンを必ず置く （sm: search-input-submit-icon / md・lg: search-input-submit）。入力済みのときはクリア（×）を出す。
- ✓検索は送信ボタンか Enter（form の送信）で確定してから実行する。画面内の結果を絞り込む検索（表の見出し行など）も、 ページを移動する検索も同じ。
- ✓クリア（×）は明示的な操作なので、押したら検索前の結果に戻してよい。
NG
- ✕入力のたびに検索・結果の更新をしない → 1 文字ごとに結果と件数の告知が変わり、スクリーンリーダーでは入力中の文字と 告知が重なって聞き取れない。入力の途中で内容が動くのは予期しない変化にもなる（WCAG 3.2.2）。
- ✕送信ボタンを省かない（sm に装飾の search-input-icon だけを置く等）→ Enter で送信できることを知らない利用者は 検索を実行できない。sm は search-input-submit-icon を置く。
- ✕一般のテキスト入力に流用しない → input。
- ✕エラー色を直書きしない → isInvalid 用のクラスを使う。
検索は role="search" のランドマークで包む
ランドマークと発見性
<form role="search"> で包み、入力欄に名前を与える。SR のランドマーク一覧から検索へ直接飛べる。
<form role="search"> <div class="search-input search-input-md"> <input type="search" aria-label="サイト内検索" … /> <button type="submit" class="search-input-submit">検索</button> </div> </form>
ランドマークも入力欄の名前もないと、SR 利用者が検索を見つけにくく、名前も placeholder 頼み。
<div class="search-input search-input-md"> <input type="search" placeholder="…" /> <!-- 名前なし --> </div>
インプット（検索）のアクセシビリティ
ネイティブ <input type="search"> を土台に、DS がクリア／送信ボタンとフォーカスを担保します。入力欄の名前と role="search" はプロダクト側で付与します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
送信は押せるボタン（sm は虫眼鏡のアイコンボタン、md / lg は「検索」ボタン）。クリアと sm の送信はアイコンのみのため名前が要る。エラーは色だけでなく境界色＋テキストで伝える。
サイズは rem / トークンで拡大に追従。狭幅では送信ボタンごと折り返しても操作を失わない。
Tab で 入力欄 → クリア → 検索 の順に移動。Enter で送信。フォーカスリングで位置が分かる。
role="search" でランドマーク化し、入力欄はラベル／aria-label で名前を持つ。クリアボタンは aria-label="クリア"、sm の送信ボタンは aria-label="検索"。検索の結果は送信したときに告知する。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
<input type="search">・<button>ベースで役割が確立 - ✓クリアボタンと sm の送信ボタン（
search-input-submit-icon）はaria-label前提、中の svg はaria-hidden前提の設計。送信ボタンの押せる範囲は 24×24 以上 - ✓フォーカス時に境界色を強調（フォーカスの可視化）
- ✓エラーは
search-input-errorの境界色で表現（色＋テキスト併用を前提）
実装時の必須対応
プロダクト側で担保する
- !検索フォームを
<form role="search">で包む - !入力欄に名前（可視ラベル か
aria-label）。placeholder をラベルにしない - !クリアボタンに
aria-label="クリア"、sm の送信ボタンにaria-label="検索"（中の svg はaria-hidden="true"） - !検索は送信（ボタン / Enter）で確定してから実行し、入力のたびに結果を変えない。結果の件数は送信したときに
aria-live="polite"で告知する - !送信ボタンは可視テキスト「検索」で名前を持たせる（アイコンのみなら
aria-label）
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab | 入力欄 → クリア → 検索 の順に移動 |
| Enter | 検索を送信する |
- SRランドマーク一覧に「検索」が現れ、入力欄・クリア・検索の名前が読まれる
- 自動axe / Lighthouse で入力欄の名前・ボタン名・コントラストを確認
アイコンボタンに名前を付け、中のアイコンは隠す
達成基準：WCAG 4.1.2 名前・役割・値 / 1.1.1 非テキストコンテンツクリアボタンに aria-label="クリア"、送信のアイコンボタンに aria-label="検索"。中の svg は aria-hidden。
<button class="search-input-clear" aria-label="クリア">…</button> <button type="submit" class="search-input-submit-icon" aria-label="検索"><svg aria-hidden="true">…</svg></button>
名前の無いクリアボタン・送信ボタンは「ボタン」としか読まれず、何のボタンか分からない。
<button class="search-input-clear">…</button> <!-- aria-label なし --> <svg>…</svg> <!-- aria-hidden なし -->