Improve keyboard navigation

[slaweet]

Motivation

Since we aim to make Lisk Hub a tool for developers and other experts, we should support them in providing time-efficient ways of interacting with the application. Keyboard navigation is especially time-efficient when providing repetitive tasks or when interacting with forms and inputs that require keyboard interaction anyway. We can draw inspiration from other tools for professionals (see screenshots below).

Acceptance criteria

• All forms have the first input focused when opened, can navigate inputs with tab and submit with enter
• All top-level pages can be visited with a keyboard shortcut, e.g. Dashboard, Wallet, Delegates, Bookmarks, Sign Message.
• All drop-downs can be opened and closed with a keyboard shortcut, e.g. Transaction filters, top bar search, account, request.
• All modals can be closed with esc
• Lists can be navigated with arrow up/down, enter. E.g. transaction list, search results, bookmarks
• All keyboard shortcuts are described in a modal

Sample screenshots from other apps

[slaweet]

Some suggestions for specific shortcuts (up for discussion):

• Ctrl-f or /: Focus search
• Ctrl-s: go to send
• Ctrl-w: go to wallet
• Ctrl-d: go to delegates page
• Ctrl-h: go to dashboard
• Ctrl-b: go to bookmarks page
• Ctrl-m: go to sign message
• Ctrl-a: open account menu
• Ctrl-t: focus transaction filters drop-down
• Ctrl-? or ?: Open keyboard shortcuts manual

Note that Ctrl is meant to be replaced with Cmd on MacOS

[ManuGowda]

As part of roadmap ideas we consider this proposal and add it to roadmap, we will implement this feature based on priority.