Add keyboard navigation to gui-v2

[jpetrell]

In gui-v1, there is keyboard navigation when using it on Remote console. And that is used everyday by many technicians that sit behind their laptop and sort issues out or configure systems. Enable keyboard navigation on gui-v2 also.

[jpetrell]

Arrow navigation e.g. between main views and vertically on the settings pages seems pretty straight-forward (i.e. the keyboard focus is moved to the adjacent item that is located in the arrow direction), and for the common UI components (dialogs, sliders, spin boxes, etc.) I can initially use gui-v1 behavior as an example.

Some open items to decide:

• How should the selected item look like and behave? Always there, or fade out after time out (as not meaningful for the touch case)? Visually mimick press effect or have it more clearly highlighted like on gui-v1 that displays blue background?
• Should there be key shortcut for opening Control cards. Could be that pressing Esc (back) on the main views would toggle between Control cards and the main carousel?
• Should we allow selecting boxes in the Overview page, or reserve left/right arrows for navigating to the adjacent Overview/Notifications pages (and the user can instead access respective device pages from the main settings hierarchy)
• How to switch between Tanks and Environment tabs in the Levels page? Clicking arrow up focuses tab bar?
• How to access status bar buttons? Similar to the tab bar, clicking arrow up focuses the first status bar button? And after clicking the right arrow key moves the focus to the status bar button on the right
• Should we show the keyboard layout somewhere like shown above in the Remote Console case?

[jpetrell]

Key navigation prototype: Screencast from 2024-05-03 13-28-08.webm

Branch: https://github.com/victronenergy/gui-v2/pull/new/jpetrell/key-navigation

Doesn't require many lines of code to get the main navigation paths covered, thanks to nice key navigation enablers in Qt Quick. But adding support for all the settings pages and dozens of different list items and controls (dialogs, sliders, etc.) will take few days. One enabler that is missing is ObjectModel variant that removes hidden items from the model like done by VisibleItemModel for gui-v1, which is needed so ListView navigation doesn't try to move focus to the hidden (disabled/disallowed) settings items.

[jpetrell]

Current key navigation on gui-v1:

• Page navigation: Move focus with Up/Down keys, Space opens a page, Left goes back, Esc jumps to Overview page
• Switch: Space toggles on/off
• Radio button group: Move focus with Up/Down keys, confirm with Space, dismiss with Esc
• Slider: Space opens the edit mode, during editing Esc cancels, Space commits, Up/Down and Left/Right changes the slider value
• Range slider: Same as the slider, but Up/Down moves the lower, and Left/Right the higher value
• Spin boxes: Space opens the edit mode with the first value focused, Esc cancels, Space commits, Left/Right moves the focus, Up/Down increments/decrements values
• Text fields: Space opens the edit mode with the first character focused, Esc cancels, Space commits, Left/Right moves the focus, typing replaces the focused character

gui-v1 shows slightly different controls when you access the spin box or text field setting using touch or with keyboard:

Should we show the keyboard layout somewhere like shown above in the Remote Console case?