ダイアログ とは？

そう、まさにそれ！ダイアログは画面の上にポップアップして「ちょっと待って、確認してね」とユーザーに話しかける小さなウィンドウのことだよ。削除確認だけじゃなく、エラー通知や名前の入力を求めるときにも使われるんだ。

それは「モーダルダイアログ」だからだよ。モーダルって「他の操作をブロックする状態」という意味で、ダイアログに答えるまで後ろの画面を操作させない仕組みになってるんだ。逆に後ろも操作できるタイプは「モードレスダイアログ」って呼ぶよ。

実は違うんだ。ダイアログは「UI部品」の名前で、モーダルは「他の操作をブロックする状態」のことを指すよ。モーダルダイアログはその両方の性質を持つもの、という感じ。モーダルじゃないダイアログもあるし、ダイアログじゃないモーダルもあるんだ。

実は意外と知られていないんだけど、「フォーカストラップ」という仕組みが必要で、ダイアログが開いている間はTabキーによるフォーカス移動をダイアログ内だけに閉じ込めなきゃいけないんだ。これを実装しないと、スクリーンリーダーを使っている視覚障害者がダイアログの外を操作してしまえる状態になって、アクセシビリティ的に大きな問題になる。WAI-ARIAの `aria-modal` 属性と組み合わせた正しい実装は、フロントエンドエンジニアでも完璧にできる人が意外と少ないくらい、細かい注意点が多い話なんだよ。