Problem solving guide
狭い画面の開閉ナビゲーションから安全に戻る
drawerとoverflow menuの開閉、利用可能項目、focus復帰を一貫させる手順です。
解決する問題
狭い画面でナビゲーションを閉じた後にfocusが失われたり、非表示項目へ移動して操作を続けられなくなる。
発生条件
- 画面端から開くmobile navigation。
- 主操作からあふれた項目をまとめるmenu。
原因候補
- 閉じた内容をTab順へ残している
見えないリンクやbuttonへfocusが入る。
- 閉じる経路ごとにfocus処理が異なる
Escapeや外側clickでtriggerへ戻れない。
推奨判断
閉状態では内部操作をTab順から外し、Escape、外側操作、項目実行のすべてで閉じ、元のtriggerへfocusを戻す。
修正手順
- 閉状態を安全にする
hiddenな領域の操作要素へfocusできない構造にする
期待する結果: 見えない操作先がなくなる。
- 閉じる経路を統合する
すべての終了操作を一つのclose処理へ集約する
期待する結果: 状態とfocus復帰が揃う。
- 無効項目を限定する
一部項目が無効でも閉じる操作と他の移動先を残す
期待する結果: 操作不能なmenuにならない。
失敗例
- 見た目だけを画面外へ移動する
起こること: 非表示リンクがTab順に残る
代わりに: DOM上でも非対話状態にする。
- 項目実行後だけfocusを戻す
起こること: Escape利用時に位置を失う
代わりに: 全終了経路からtriggerへ戻す。
検証方法
- 閉状態でTab移動する
drawerまたはmenu内部へfocusが入らない。
- 開いてEscapeを押す
閉じてtriggerへfocusが戻る。
- 無効項目を含むmenuを操作する
有効項目と閉じる操作は利用できる。