タブ移動の最適化

[MaximizedOwl]

what

Dialogでタブ移動を行うとメニューが閉じてしまう。それを中心にほかも見直して改善。

why

Bad UIとなってしまっており使いづらい。

[MaximizedOwl]

Dialogの各要素にtabIndexを指定するだけでは変わらず、Dialogが閉じてしまって理想的なタブ移動は実現できなかった。

[MaximizedOwl]

Dialogタグを使えばFocus Trap(開いているDialogやModalの後ろにフォーカスをいかないようにする仕組み)が組み込まれているのでよしなに制御してくれる。
Dialogタグはモダンブラウザなら動く。

参考資料

1. https://zenn.dev/no4_dev/articles/ecbbf4076c51ff

[MaximizedOwl]

MUI の Focus Trapだとうまく動作しないから別のライブラリも検討

1. https://github.com/focus-trap/focus-trap/blob/master/docs/js/animated-dialog.js

[MaximizedOwl]

TextFieldにtabIndexをどうやって付与するかの話

1. TabIndex of -1 not working for TextField and Select (possibly others) mui/material-ui#9575

[MaximizedOwl]

外部ライブラリ4種比較結果。react-focus-lock が良さそう。
https://npmtrends.com/focus-trap-vs-focus-trap-react-vs-react-focus-lock-vs-react-focus-trap