Dialog

Dialog は、ユーザーの操作に介入して、操作実行の確認などを行う対話型のコンポーネントです。

1. 概要 (Overview)

ユーザーの操作に介入することで、操作実行の確認などを行います。Scrim を伴って元のページのコンテンツより上の面に表示され、基本的にはモードを生じさせます。モードの間、下の階層のコンテンツは操作できません。

Dialog の問いかけを示す Title を配置します。

問いかけの補足や、操作の対象・影響範囲などを伝えるコンテンツを配置します。

アクションを実行するボタンとキャンセルするボタンを配置します。ボタンの並びは横方向・縦方向から選択できます。

Dialog の下に Scrim を敷いてモードを作り、下の階層が操作できないことを示します。

使わないで済むならなるべく使わない方が学習性・予測可能性を保ちやすく操作感をスポイルしない（GUIとして望ましい設計を保ちやすい）コンポーネントです。

お気に入りからの削除など、使用頻度が多い操作には使わない。ダイアログでのトリガー押下までがフローの1セットとして学習されるため、操作の確認として機能せず、操作の効率までもが落ちる（フローが1ステップ増えるだけになってしまう）
元に戻せるような非破壊的な操作にも使わない

サイズを決定します。

Header・Content・Footer の揃え位置を決定します。Left / Center / Right から選択できます（デフォルトは Center）。

Footer のボタンの並び方向を決定します。Row / Column から選択できます（デフォルトは Row）。

	Modifier class
Row*	`.-button-flow-row`
Column	`.-button-flow-column`

以下は Dialog 本体（.in-dialog）の表示例です。実際の使用時は Scrim を含む .in-modal に内包し、画面中央に表示します。

商品を削除しますか？

この操作は元に戻せません。

商品を削除しますか？

この操作は元に戻せません。

Dialog は開いているか閉じているかの状態を持ちます。開くときはアニメーションで表示され、モードが生じたことを伝えます。

送信・削除などのアクション実行とキャンセルの 2 択をデフォルトとします。アクションが 1 つしかない Dialog にはしません（できることが 1 つしかないなら自動化・省略します）。キャンセルのトリガーは左側に配置します。

領域外を押して閉じられるのは、Dialog 自体の問いかけ・対話をそもそも無視・拒否するような意味の行動です。それと Dialog 内のキャンセルを押す（無視ではなく Dialog に応答する）行為が同じ結果になるのは適切ではないため、領域外を押しても閉じず、キャンセルを押したら閉じます。

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

<dialog> 要素または role="dialog" と aria-modal="true" でマークアップし、モーダルであることを支援技術に伝える
Title と Dialog を aria-labelledby などで関連付ける
開いている間はフォーカスを Dialog 内に留め、閉じたときは元のトリガーにフォーカスを戻す