メニュー
component縦に項目を並べる汎用メニューです。いま開いているページを示しながら移動できるナビゲーション（サイドナビ）にも、設定・ログアウトなどの操作を並べるアクションメニューにも使えます。幅は親要素で決めます（サイドナビ用途は w-70 = 280px が目安）。
項目の状態
default / hover / focus / current。hover はニュートラル（背景 neutral/100）、current は primary（背景 primary/50 + 太字）— primary は「現在地」の意味に予約
サイズ
md（既定、padding 12）/ sm（.menu-item-sm、padding 8）。sm は項目数が多く密度を上げたいナビ（ドキュメントのサイドナビ等）専用
使用例: ナビゲーション（サイドナビ）
nav 要素で包み、現在地に aria-current="page"。グループは .menu-divider で区切る。外部リンク等の末尾装飾アイコンは .menu-item-trailing（16px・右端寄せ）
使用例: アクションメニュー
操作の項目は button 要素で書く（遷移は a）。ナビゲーションではないので nav では包まない。左アイコンは任意（付けるなら同じグループ内で有無を揃える）
機能
このコンポーネントの用途
縦に項目を並べる汎用メニュー。現在地を示しながら階層を移動するナビゲーション
（マイページのサイドナビ等）と、操作を並べるアクションメニューの両方に使う。
サイト階層のパス表示は breadcrumb、横並びのコンテンツ切替は tab。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓ナビ用途は nav 要素で包んで aria-label を付け、現在地に aria-current="page" を付ける。
- ✓項目は遷移なら a、操作（ログアウト等）なら button を使う。どちらも下線なし（項目形状のため「常に下線」原則の例外）。
- ✓左アイコンは任意。付けるなら同じグループ内では有無を揃える（テキストの頭が揃わなくなるため）。
- ✓外部リンク等の末尾装飾アイコンは menu-item-trailing（16px・右端寄せ）。左アイコンの 24px と混同しない。
- ✓グループは menu-group、区切りは menu-divider。幅は親要素で決める（サイドナビは w-70 = 280px 目安）。
- ✓項目数が多く密度を上げたいナビ（ドキュメントのサイドナビ等）は menu-item-sm。通常は md（既定）のまま。
NG
- ✕現在地をクラスだけで示さない → aria-current="page" を付ける。
- ✕横並びのコンテンツ切替に流用しない → tab。
- ✕操作項目に a を使わない → 遷移は a / 実行は button。
遷移は a・操作は button
要素の役割を分ける
ページ遷移は <a href>、その場の操作は <button>。SR に役割が正しく伝わり、遷移は新規タブ・右クリックも効く。
<a class="menu-item" href="…">案件一覧</a> <button type="button" class="menu-item">ログアウト</button>
遷移を button にしない。役割が「ボタン」になり、遷移手段（新規タブ等）が失われる。
<button type="button" class="menu-item">案件一覧</button>
アイコンの有無はグループ内で揃える
視線と整列同じグループは全項目にアイコンを付ける（または全て無し）。ラベル開始位置が揃い、走査しやすい。
<a class="menu-item"><svg class="icon">…</svg>マイページ</a> <a class="menu-item"><svg class="icon">…</svg>アカウント設定</a>
メニューのアクセシビリティ
relay のメニューは ネイティブ nav ＋ a / button ベースで、ARIA メニューウィジェット（role=menu・矢印キー）ではありません。キーボードは Tab / Enter で操作します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
現在地は aria-current="page" による背景＋太字で示し、色だけに頼らない。左アイコンは装飾、区切りは menu-divider でグループ化。
幅は親要素で決まり、リフローで縦積みに崩れても機能を失わない。文字は rem / トークンで拡大に追従。
Tab で各項目へ、Enter で遷移／実行。ネイティブ nav のため矢印キーは不要。フォーカスリングで位置が分かる。
nav は aria-label でランドマーク名を持ち、各項目は role=link / button として、現在地は「現在のページ」として読まれる。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
nav＋a/buttonベース — 役割・名前・状態が標準で確立 - ✓
aria-current="page"のスタイル（背景＋太字）で現在地を色以外でも表現 - ✓フォーカスリング
--shadow-focus-ring（:focus-visible） - ✓末尾装飾アイコン
menu-item-trailingはaria-hidden前提の設計 - ✓テキスト色は
fg-*ロールでコントラストを確保
実装時の必須対応
プロダクト側で担保する
- !ナビは
<nav aria-label="…">で包む。複数ある場合は固有のラベルを付ける - !現在地に
aria-current="page"（色・太字だけに頼らない） - !遷移は
<a>、操作は<button>と要素で役割を分ける - !装飾アイコンは
aria-hidden="true"、別タブで開くリンクは手がかりと説明を添える
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | 各項目へ移動する |
| Enter | リンクを遷移 / ボタンを実行する |
- SRランドマーク「ナビゲーション: <ラベル>」、現在地は「現在のページ」、各項目のラベルが読まれる
- 操作矢印キーは不要（ネイティブ nav のため Tab 移動）
- 自動axe / Lighthouse で nav ラベル・
aria-current・リンク名・コントラストを確認
現在地は aria-current="page"
達成基準：WCAG 4.1.2 名前・役割・値 / 1.4.1 色の使用
aria-current="page" を付けると、背景＋太字に加え SR が「現在のページ」と読む。
<a class="menu-item" aria-current="page">マイページ</a>
aria-current が無いと DS の現在地スタイルも当たらず、視覚的にも SR 的にも現在地が示されない。
<a class="menu-item" href="…">マイページ</a> <!-- aria-current なし -->