オーバーレイ
Alert Dialog
取り消せない操作を確認するためのダイアログ。role="alertdialog" を持ち、背景クリックでは閉じません。確認かキャンセルの操作が必要で、Escape で閉じます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<AlertDialog
open={open}
onClose={close}
title="Delete item?"
status="danger"
actions={
<>
<Button variant="ghost" onClick={close}>Cancel</Button>
<Button status="danger" onClick={confirmDelete}>Delete</Button>
</>
}
>
This action cannot be undone.
</AlertDialog>設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
open 必須 | boolean | — | Whether the dialog is open. |
onClose 必須 | () => void | — | Called when the dialog requests to close (Escape key or cancel action). Overlay clicks do NOT close the dialog — an explicit action is required. |
title 必須 | ReactNode | — | Dialog title, announced as the accessible name. |
children 必須 | ReactNode | — | Description / body content, announced as the accessible description. |
actions | ReactNode | — | Action buttons (e.g. a confirm button and a cancel button). Rendered in the footer in the order provided. |
status | AlertDialogStatus | primary | Semantic intent — tints the icon area. @default 'primary' |
className | string | — |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。