New chat dialog: keyboard shortcuts

[ghoffart]

• Platform (linux/mac/windows): macOS 10.15.3
• Delta Chat Desktop Version: 0.999.1

In the "new chat" dialog the user can enter a few characters as live search, and the hit list is shortened to the entries containing these characters. That’s good. But on macOS the expectation of users would be, that after entering a few characters, the user could select the first entry of the list by pressing "Cursor down", and subsequently select others with "Cursor up" / "Cursor down"

The actual behaviour currently is, that there seems to be no keyboard shortcut to select entries from the list.

[farooqkz]

This isn't only expectation of Mac users. It will benefit all desktop users. I am unsure how to implement it:

• Press TAB key to switch to the list then navigate between items?
• Press Down key to switch to the list and focus on the first item?
• Something else?

RFC from @Simon-Laux

[Simon-Laux]

I would like to generally think about how to do keyboard shortcuts and have some kind of system for it. Keyboard shortcuts are context dependent, like if I have a dialog open shortcut for switching the chat should not be active for example. That's why I think we think about some better system/solution than the hack if-statements in src/renderer /keybindings.ts like

https://github.com/deltachat/deltachat-desktop/blob/03464e4e42d8730414624d12bc9e3b665146e4ab/src/renderer/keybindings.ts#L147-L155

I would like to discuss such a system together also with the other experienced react people such as @maxphilippov and @achou11.

We could should look into how other react projects solve this challenge.

[WofWca]

For this particular case I believe we'll need some JS to handle arrow keys.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#grouping_controls:

For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendant choice/tab/cell/row should be removed from the tab order (tabindex="-1"). Users should be able to navigate the descendant elements using arrow keys.

Looks like Signal does the same with messages: they dynamically change tabindex of individual messages as you focus.