overlay · @awesome-ds/react
AlertDialog
取り消せない操作を安全に確認する警告ダイアログ。
状態マトリクス
開いている
閉じている
構造
- 背景オーバーレイ
- alertdialog
- 結果の説明
- 確定
- キャンセル
- エラー通知
キーボード操作契約
確認中以外はEscapeでキャンセルできます。確認中は操作を固定します。
スクリーンリーダー契約
alertdialogとして結果、確認中状態、失敗通知、確定・キャンセル操作を伝えます。
コンテンツ規則
- 取り消せない結果を具体的に示します。
- 確定と安全なキャンセルを明示的に書き分けます。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
open | boolean | 必須 | 表示状態を外部から制御します。 |
onClose | () => void | 必須 | 閉じる操作を受け取るコールバック。 |
onConfirm | () => void | Promise<void> | 必須 | 確定操作を実行するコールバック。 |
title | string | 必須 | 領域の目的を示す見出し。 |
children | ReactNode | 必須 | 表示または読み上げ対象となる内容。 |
confirming | boolean | — | 外部から制御する処理中状態。 |
confirmLabel | string | — | 確定操作のローカライズ済みラベル。 |
confirmingLabel | string | — | 確定処理中のローカライズ済みラベル。 |
cancelLabel | string | — | キャンセル操作のローカライズ済みラベル。 |
confirmationErrorLabel | string | — | 確定失敗時に読み上げるローカライズ済み文言。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
コピー可能な実装例
import { AlertDialog } from "@awesome-ds/react";
<AlertDialog open title="Delete" onClose={cancel} onConfirm={remove}>Sure?</AlertDialog>