確認ダイアログ
「本当に削除しますか？」をOK/キャンセルで確認。破壊的操作の前に一歩置く確認UIのパターン。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 取り消せない削除の最終確認
- 既定を安全側（キャンセル）にしたい確認
- 破壊的操作を色と文言で区別したい場面
- 避ける場面
- 取り消し可能な操作（スナックバーで足りる）
- 毎回の軽い操作に挟む
- OK 側に既定フォーカスを置く
- 構成要素
- 削除ボタン
- バックドロップ
- 警告アイコン
- タイトルと説明
- キャンセル／削除ボタン
- 結果の文言
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 成功
- キーボード
Enter／Space で開くと既定フォーカスはキャンセルへ、Tab で 2 つのボタンを循環、Esc・背景クリックでキャンセルして元のボタンへ戻る。閉じている間は中のボタンに Tab が入らない
- 支援技術
APG Alert Dialog: role=alertdialog＋aria-modal＋aria-labelledby＋aria-describedby。閉じている間は inert。初期フォーカスは安全側のキャンセル。結果は role=status。破壊的ボタンは赤色＋「削除する」の文言
- 動き
出現 220ms（0.88→1 スケール・軽い overshoot）、背景 220ms、結果文言 300ms。reduced-motion で停止
目的確かめる
デザインの要点
- 既定フォーカスは安全側の「キャンセル」に置く。Enter 連打で削除が通る配置は事故を招く
- 破壊的ボタンは赤色と「削除する」の動詞で示し、「OK」にしない。何が起きるかをボタンの文言だけで分からせる
- role=alertdialog にして aria-describedby で「取り消せません」を本文に結ぶ。開いた瞬間に理由まで読まれる
- 結果の「削除しました」は role=status に出して 2.5 秒で消す。ダイアログを閉じた後の確認を画面にも読み上げにも残す
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="actions">
<button class="delete-btn" id="deleteBtn">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M2 3.5h10M5.5 3.5V2.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v1M5 3.5l.5 8M9 3.5l-.5 8M3.5 3.5l.5 8h6l.5-8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
削除する
</button>
<p class="result-msg" id="resultMsg" role="status" aria-live="polite"></p>
</div>
<div class="backdrop" id="backdrop" aria-hidden="true"></div>
<div class="confirm" id="confirm" role="alertdialog" aria-modal="true" aria-labelledby="confirmTitle" aria-describedby="confirmDesc" aria-hidden="true" inert>
<div class="confirm-icon" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="#c0492f" stroke-width="2"/>
<line x1="12" y1="7" x2="12" y2="13" stroke="#c0492f" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="16.5" r="1" fill="#c0492f"/>
</svg>
</div>
<p class="confirm-title" id="confirmTitle">本当に削除しますか？</p>
<p class="confirm-desc" id="confirmDesc">この操作は取り消せません。</p>
<div class="confirm-actions">
<button class="btn-cancel" id="confirmCancel">キャンセル</button>
<button class="btn-danger" id="confirmOk">削除する</button>
</div>
</div>
</div>