自作のモーダルを開いている間、後ろの画面を包む要素に inert を付けると、Tab キーのフォーカスもクリックも届かなくなり、アクセシビリティツリーからも外れます。フォーカストラップを作るときは、後ろの画面へフォーカスが移らないよう ...

自作のモーダルを閉じると、フォーカスはページの先頭に飛びます。開く前の要素を覚えて、閉じたときに戻すフックの書き方と、autoFocus で覚える要素がずれる落とし穴、元のボタンが消えたときの戻し先を、検証環境で確かめて紹介します。

dialog要素をshowModal()で開くと、Escキーで閉じる、後ろを操作できなくする、フォーカスを戻すといった処理をブラウザが受け持ちます。Reactのstateとずれないようにつなぐ書き方を、検証環境で確かめて紹介します。

createPortalを使うと、コンポーネントの中で開いたモーダルを、DOMの上ではdocument.bodyの直下に描画できます。親のCSSでダイアログが切れる例と、ポータルの中のクリックが親に届き、親のコンテキストがポータルの中 ...