search

MaximizedOwl / simple-markdown-editor-ts

Web上で使えるMarkdown対応のWYSIWYGエディター
https://maximizedowl.github.io/simple-markdown-editor-ts/
MIT License
0 stars 0 forks source link

タブ移動の最適化 #6

Open MaximizedOwl opened 1 year ago

MaximizedOwl commented 1 year ago

what

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

why

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

MaximizedOwl commented 1 year ago

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

MaximizedOwl commented 1 year ago

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

参考資料

  1. https://zenn.dev/no4_dev/articles/ecbbf4076c51ff
MaximizedOwl commented 1 year ago

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

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

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

  1. https://github.com/mui/material-ui/issues/9575
MaximizedOwl commented 1 year ago

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