インプット（検索）
componentキーワードを入力して検索するための入力欄です。入力した文字は × ボタンでまとめて消せます。
size × state
valid (isInvalid=false)
isInvalid=true
bg negative/50 · border 2px negative/500
機能
このコンポーネントの用途
フリーワード検索の入力。クリア（×）と送信（検索）を内蔵。
通常の 1 行入力は search-input ではなく input。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓type="search"。md/lg では送信ボタン、入力済みのときクリアを出す。
NG
- ✕一般のテキスト入力に流用しない → input。
- ✕エラー色を直書きしない → isInvalid 用のクラスを使う。
検索は role="search" のランドマークで包む
ランドマークと発見性
<form role="search"> で包み、入力欄に名前を与える。SR のランドマーク一覧から検索へ直接飛べる。
<form role="search"> <div class="search-input search-input-md"> <input type="search" aria-label="サイト内検索" … /> </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
検索アイコンは装飾。クリアボタンはアイコンのみのため名前が要る。エラーは色だけでなく境界色＋テキストで伝える。
サイズは rem / トークンで拡大に追従。狭幅では送信ボタンごと折り返しても操作を失わない。
Tab で 入力欄 → クリア → 検索 の順に移動。Enter で送信。フォーカスリングで位置が分かる。
role="search" でランドマーク化し、入力欄はラベル／aria-label で名前を持つ。クリアボタンは aria-label="クリア"。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
<input type="search">・<button>ベースで役割が確立 - ✓クリアボタンは
aria-label前提、検索アイコンはaria-hidden前提の設計 - ✓フォーカス時に境界色を強調（フォーカスの可視化）
- ✓エラーは
search-input-errorの境界色で表現（色＋テキスト併用を前提）
実装時の必須対応
プロダクト側で担保する
- !検索フォームを
<form role="search">で包む - !入力欄に名前（可視ラベル か
aria-label）。placeholder をラベルにしない - !クリアボタンに
aria-label="クリア"、検索アイコンにaria-hidden="true" - !送信ボタンは可視テキスト「検索」で名前を持たせる（アイコンのみなら
aria-label）
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab | 入力欄 → クリア → 検索 の順に移動 |
| Enter | 検索を送信する |
- SRランドマーク一覧に「検索」が現れ、入力欄・クリア・検索の名前が読まれる
- 自動axe / Lighthouse で入力欄の名前・ボタン名・コントラストを確認
アイコンボタンに名前・装飾アイコンは隠す
達成基準：WCAG 4.1.2 名前・役割・値 / 1.1.1 非テキストコンテンツクリアボタンに aria-label="クリア"、検索アイコンは aria-hidden。
<button class="search-input-clear" aria-label="クリア">…</button> <span class="search-input-icon"><svg aria-hidden="true">…</svg></span>
名前の無いクリアボタンは「ボタン」としか読まれず、装飾アイコンも読み上げノイズになる。
<button class="search-input-clear">…</button> <!-- aria-label なし --> <svg>…</svg> <!-- aria-hidden なし -->