Implement keyboard navigation for the whole application

[stefandesu]

Ideally, all the features in this application should be accessible with a keyboard only.

[stefandesu]

Interesting article about this: https://medium.com/@sashika/j-k-or-how-to-choose-keyboard-shortcuts-for-web-applications-a7c3b7b408ee.

Suggestions for keyboard shortcuts:

• ? - show available keyboard shortcuts
• up down left right - navigate in currently selected component (e.g. search results, concept tree, mapping browser)
• Enter - choose a concept etc. while navigating with arrow keys
• b - (or other letter) focus on concept browser or toggle sides
• m - focus on mapping browser
• s - search for concept
• Esc - leave search field if focused (shortcuts won't work while typing in a text field)
• (tbd) - select different scheme
• a - add selected concept to mapping
• d - delete last concept from mapping
• r - reverse mapping

Some more shortcuts may be needed for the mapping components.

[nichtich]

We should start with enabling default keyboard navigation as provided by the browser, see https://medium.com/@emilymears/getting-started-with-web-accessibility-in-vue-17e2c4ea0842. For instance at the moment component itemName with @click event does not get a focus.

[nichtich]

Keyboard-Shortcuts should be configurable shown in a help / settings dialog. Requires #173.

[DennisTobola]

There are no Shortcuts for the following actions:

• selecting the settings page and navigating inside of it (it works, but you have to click the navigation area first, navigating through the contents does not work at all)
• selecting the search in the source and target schemes
  • (there are shortcuts [ctrl + shift + f, ctrl + shift + g], however, they do not work)
  • if you are in the search field, you can search for schemes, but you are not able to scroll through them via the arrow keys or select them
• add concept as favorite and open the favorites
• navigation in the concept tree
• (navigation in the scheme details)

[stefandesu]

selecting the settings page and navigating inside of it (it works, but you have to click the navigation area first, navigating through the contents does not work at all)

We can add a shortcut to open the settings, but personally, I don't think it's really necessary. It'll be very cumbersome to navigate the settings by keyboard and it's not something that needs to be done regularly, so it should be fine if it's accessible by mouse only.

(there are shortcuts [ctrl + shift + f, ctrl + shift + g], however, they do not work)

They work for me in all major browsers. Can you tell me exactly what browser you are using?

if you are in the search field, you can search for schemes, but you are not able to scroll through them via the arrow keys or select them

Good point!

add concept as favorite and open the favorites

How would you implement this? Currently, you can add a concept as favorite by dragging it to the star in the navbar, meaning that you can drag a concept from anywhere within the application. Would you add two keyboard shortcuts for adding the selected concept (left or right) as a favorite?

I like the idea of accessing favorite concepts through keyboard shortcuts!

navigation in the concept tree

Also good idea!

(navigation in the scheme details)

Yeah, I guess you should at least be able to scroll and cycle through the tabs.

[nichtich]

There should also be a keyboard shortcut to show keyboard shortcuts and/or the shortcuts should be shown as tooltips.

[stefandesu]

There should also be a keyboard shortcut to show keyboard shortcuts and/or the shortcuts should be shown as tooltips.

Also a good idea.

(there are shortcuts [ctrl + shift + f, ctrl + shift + g], however, they do not work)

It seems that all shortcuts with ctrl+shift don't work. I can use cmd+shift+f/g on macOS, but ctrl+shift+f/g don't work even though other shortcuts with ctrl are working. I will investigate this.

[nichtich]

To look up existing keyboard shortcuts in other applications see also https://defkey.com/what-means/alt-n