続々々・モーダルなコンポーネントのフォーカス管理(dialog要素)
はじめに
これまでモーダルを表示したときのTABによるフォーカス移動でバックグラウンドに移動するのを防ぐための実装をしてきた。この方法は「フォーカストラップ」と呼ぶらしい。*1
注釈のサイトにユーザビリティやスクリーンリーダによるTAB移動問題の指摘もあったので、今後はこの実装をやめる。
また、最近dialog要素を知り簡単に実装できたので記事にした。
過去の記事
モーダルなコンポーネントのフォーカス管理 - my coding note
続・モーダルなコンポーネントのフォーカス管理（Nuxt.js版） - my coding note
続々・モーダルなコンポーネントのフォーカス管理（Nuxt.js版 2） - my coding note
dialog要素でモーダルダイアログを作る(Vue.js)
基本的な使い方は下記のサイトが詳しいので、説明は省く。
成果物
Google Chrome 117.0.5938.149で確認したもの
今までのフォーカストラップ方式と異なり、TABによるフォーカス移動はアドレスバーに行ってしまう。
- ユーザビリティ的にはこちらの方がいいんじゃない？（言い訳）
解説
showModal()でモーダルでダイアログを表示する。モーダレスはshow()を使う。@cancel.prevent=onCancelでpreventDefault()- Escapeキーでダイアログが閉じるのがデフォルトのため、閉じさせたくない場合に利用する
close()メソッドで渡した値はcloseイベントでreturnValue(文字列)として取得できる。- CSSは一切なし。ブラウザのデフォルトでダイアログのセンタリングや背景色が設定されている。
- VueのライブラリはES Module形式で呼び出した。（公式そのまま）
以上！簡単！
所感
知らないうちにブラウザのサポートする機能がどんどん増えていた。 そして各ブラウザのサポートも早く感じる。
dialog要素を調べる過程で inert属性という、サブツリーの要素を一括無効化できる属性を発見できた。
