シート内データの編集をなるべくキーボードだけで完結させたい

[ikngtty]

以下のような仕様だと便利。

• 新規行作成時に最左の入力欄に最初からカーソルがあっている。
• Tab キーで遷移しながら入力できる。
  • 最右の入力欄に行った際に Tab キーを押すと、カーソルがどこか関係ないところに飛んでしまう。最左の入力欄に戻ってほしい。
  • カレンダーをキーで入力することができない。
• Enter キーで行保存、Esc キーでキャンセル。

[FujiHaruka]

こういうアクセシビリティはあとでやるとだるいので早めにやったほうがいいやつですね

[FujiHaruka]

実装済み

• 新規行作成時に最左の入力欄にフォーカスされる
• カレンダーをキーで入力できる

未実装

• 最右の入力欄に行った際に Tab キーを押すと、カーソルがどこか関係ないところに飛んでしまう。最左の入力欄に戻ってほしい。
  • キーボードで入力を完結させるという観点からは最右の入力欄で Tab キーを押したら最左の「保存」ボタンにフォーカス当たるのがよさそう。
• Enter キーで行保存、Esc キーでキャンセル。
  • -> 複数行入力可能な入力欄もあるので保存のショートカットは Ctrl + Enter とか Cmd + Enter とかにします

[FujiHaruka]

• Tab キーでフォーカスをループ
  • tabindex だけで完結せず JavaScript を使ったそこそこ複雑なコードになりそうなのでサポートしないことにしました
• Enter キーで行保存、Esc キーでキャンセル
  • material-table が Ecs キャンセルをサポートしていますが、キーをトリガーにした保存はそれ用の API が提供されてなくてライブラリ内部のメソッドを呼び出す形になるのでライブラリがサポートしてくれるのを待つことにしました How to support enter and escape key mbrn/material-table#1162

なのでこの issue はここまででクローズとします。