overlay · @awesome-ds/react
Dialog
フォーカスを管理し、Escapeで閉じられるモーダル。
状態マトリクス
開いている
閉じている
構造
- 背景オーバーレイ
- 名前付きダイアログ
- タイトル
- 本文
- 閉じる操作
キーボード操作契約
内部へフォーカスを移し、Tabを閉じ込め、Escapeで閉じた後トリガーへ戻します。
スクリーンリーダー契約
dialogとタイトルでモーダルな作業文脈を示し、開閉時のフォーカスを管理します。
コンテンツ規則
- 作業内容が分かる固有のタイトルを付けます。
- 主要操作を見える位置に置き、結果を明確にします。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
open | boolean | 必須 | 表示状態を外部から制御します。 |
onClose | () => void | 必須 | 閉じる操作を受け取るコールバック。 |
title | string | 必須 | 領域の目的を示す見出し。 |
children | ReactNode | 必須 | 表示または読み上げ対象となる内容。 |
closeLabel | string | — | 閉じる操作のローカライズ済みラベル。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
コピー可能な実装例
import { Dialog } from "@awesome-ds/react";
<Dialog open title="Confirm" onClose={() => {}}>Body</Dialog>