はじめに これまでモーダルを表示したときのTABによるフォーカス移動でバックグラウンドに移動するのを防ぐための実装をしてきた。この方法は「フォーカストラップ」と呼ぶらしい。*1 注釈のサイトにユーザビリティやスクリーンリーダによるTAB移動問題の指…

はじめに fontawesomeのSpinnerアイコンに回転アニメーションを設定したが、動かない。 MacbookのChromeでは動かないが、iOSのSafariで動いていたので、調査した。

はじめに Trelloのチェックリストは、フォーカスが外れたときに編集内容がキャンセルされる 単純にinputのblurイベントをコールするのではなく、関連機能にフォーカスがある場合はキャンセルされない 対象コンポーネント（textbox、OKボタン、キャンセルボタ…

はじめに SlackやVisual Studio Codeのようにサイドメニューの幅をドラッグで調整できるサンプルを作った。 先に結果

前回の反省 カスタムディレクティブで作ってみたが、ダイアログが埋め込んであるページに遷移する度にfocusinイベント登録が発生してしまう。 skysan87.hatenablog.com 今回やりたいこと カスタムディレクティブをやめる。 以下のサイトを参考にダイアログを…

やりたいこと Nuxt.jsでもVue.js同じようなフォーカス管理をしたい。 skysan87.hatenablog.com 背景 Vue.jsで作ったものを利用しようとすると以下のエラーが出てしまい、うまくいかない。 document undefined 公式の回避方法もうまくいかない。 解決策 カス…

やりたいこと Vue.jsでモーダルダイアログ表示中にTab移動した時、フォーカスがモーダルダイアログ外に行かないようにしたい。 ※ただし、Webページ外(ブラウザのアドレスバーなど)からのTab移動は除く。 成果物 Before Tab移動すると、ダイアログ外に移動し…