セレクター
component用意された選択肢の中から 1 つを選ぶプルダウン（ドロップダウン）です。
size × state
valid · with icon
isInvalid=true
bg negative/50 · border 2px negative/500
icon: true / false
左アイコン slot は任意。省略すると text only.
icon: false
icon: true (場所)
機能
このコンポーネントの用途
アイコン枠・状態表示付きの単一選択コンポーネント（ネイティブ <select> をラップ）。
選択肢が多い単一選択に向く。最小スタイルだけなら select。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓サイズ/状態は Input と同じ体系（selector-{sm,md,lg}, isInvalid）。
- ✓先頭に空 option（プレースホルダー）を置ける。
NG
- ✕少数（2〜7）の選択肢には使わず radio で見せる → 一覧性が上がる。
- ✕エラー色を直書きしない → invalid 用クラスを使う。
ラベルは可視ラベルで関連付け
ラベル又は説明文可視ラベルを for／id で関連付ける。先頭は空値のプレースホルダ。
<label for="industry">業種</label> <select id="industry" class="selector-field"> <option value="">選択してください</option> </select>
ラベルの無い select にしない。何を選ぶ欄か SR に伝わらず、先頭値が誤って選ばれやすい。
<select class="selector-field"> <!-- ラベルなし --> <option value="1">製造業</option> </select>
セレクターのアクセシビリティ
relay のセレクターは ネイティブ <select> ベースで、開閉・矢印キー選択・SR 読み上げは OS 標準に従います。ラベルの関連付けと装飾アイコンの aria-hidden はプロダクト側で付与します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
選択値を明示し、左アイコンは装飾。エラーは色だけでなく境界色＋テキストで伝える。
サイズは rem / トークンで拡大に追従。ネイティブの選択肢一覧は OS のズーム・表示設定に従う。
Tab で到達、Space/Enter で開き、↑↓ で選択（ネイティブ select）。フォーカスリングで位置が分かる。
ラベルの関連付けで名前が確立し、「コンボボックス、n/m」と選択値が読まれる。装飾アイコンは aria-hidden。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
<select>ベース — 役割・値・開閉・矢印キー選択が標準で確立 - ✓フォーカス時に境界色を強調（フォーカスの可視化）
- ✓エラーは
selector-errorの境界色で表現（色＋テキスト併用を前提） - ✓左アイコン slot（
selector-icon）は装飾＝aria-hidden前提の設計
実装時の必須対応
プロダクト側で担保する
- !可視ラベルを
for／id（またはaria-labelledby）で関連付ける - !先頭のプレースホルダは
value=""（必須なら未選択を検証）。誤って有効値が初期選択されないように - !装飾アイコンは
aria-hidden="true"。エラー時はaria-invalid="true"＋aria-describedby - !選択肢が非常に多い／検索が要る場合はネイティブ select が最適か再検討する
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab | セレクターへ移動 |
| Space / Enter | 選択肢を開く |
| ↑ ↓ | 選択肢を移動・選択する |
- SRラベルと共に「コンボボックス」、選択値・件数が読まれる
- 自動axe / Lighthouse でラベル関連付け・装飾アイコン・コントラストを確認
装飾アイコンは aria-hidden
達成基準：WCAG 1.1.1 非テキストコンテンツ
左アイコンは装飾なので aria-hidden="true"。名前はラベルが担う。
<span class="selector-icon"><svg aria-hidden="true">…</svg></span> <select id="area">…</select>
ラベルが無く、装飾アイコンも隠していないと、名前が曖昧になり読み上げノイズになる。
<span class="selector-icon"><svg>…</svg></span> <!-- aria-hidden なし --> <select>…</select> <!-- ラベルなし -->