表示切替をキーボードでも一貫して操作できるようにする | Web Parts Library

解決する問題

表示を切り替えた時に選択状態、focus、表示内容がずれ、キーボードでは同じ操作を再現できない。

発生条件

関連するpanelを切り替えるタブ。
同じデータをカードとリストなど別形式で表示する切替。

原因候補

役割の異なる切替を同じARIA patternで実装している
期待する矢印操作と内容更新が一致しない。
選択表示だけを変えて内容を同期していない
見えている値と操作状態が食い違う。

推奨判断

panel選択はtab pattern、同一データの形式選択は押下状態を持つbutton groupとして実装し、選択・focus・内容を同じ状態から更新する。

修正手順

役割を決める
切替後に別panelになるか同じrecordsの表示形式だけが変わるか分類する
期待する結果: 適切なkeyboard contractを選べる。
focus操作を実装する
tabは矢印とHome/End、形式切替は通常のbutton Tab順を使う
期待する結果: 標準的な操作で移動できる。
内容を同期する
選択値からpanelまたは表示形式を一度に更新する
期待する結果: 状態と内容がずれない。

失敗例

すべてのtabをTab順へ入れる
起こること: 操作回数が増え矢印移動と競合する
代わりに: roving focusを使用する。
形式切替でrecords自体を入れ替える
起こること: 比較対象が変化する
代わりに: 同じデータ集合を異なる表現だけで描画する。

検証方法

tablistで矢印とHome/Endを使う
focusと選択panelが規則どおり移る。
表示形式を切り替える
同じrecordsがカードとリストで維持される。
dark themeでfocusする
選択状態とfocus ringを別々に判別できる。