Accessibility and keyboard

Fireback provides both concept, and built in support for accessibility to implement user keyboard shortcut keys for Desktop or Web apps. In this article we only cover how to build the support for keyboard, basically to make webapp or desktop app.

Basic common knowledge

I believe every web app or desktop app, should work fully with keyboard. It means, user should be able to navigate throught the actions of the app using "Tab" key or vice versa using "Shift+Tab" key. Also, many dekstop or web apps, need to have enough sufficient keybord shortcuts to make user life easier. This becomes more bold in day to day software, using mouse slows down the expert user and if they are limited keyboard usage, product might be valued as low quality.

Considering that, while we are building an interface, we need to focus on:

• User can interact with all options, in correct order, with TAB+Enter, or navigate back using keyboard
• Provide key combination for common tasks in the app, so user doesn't have to open the menus manually
• Consider that user operating system might change, so key combinations should compensate for environment the app is running
• Allow user to define their own set of key combinations, meaning override the default combinations
• Allow user to define new shortcut keys, for actions you did not provide in the app.

How fireback supports you

Fireback provides kbshort sub module, which stores, and ships the keyboard shortcuts for you. In first glance supporting keyboard might seem fully UI job, but in an advanced system, which allows users to define their own set of combination keys, you need to store these information in your backend.

Create first keyboard combination

You can use CLI/HTTP/GRPC for this action, we follow cli for ease of use here. You need to install fireback on your system, and initialize a project before.

Running this command it will show you list of keyboard shortcuts:

fireback kbshort t

Results might be similar to:

Count 0
+---+-------------+----------+----------+--------+----+------+--------------------+-----------------+--------+
| # | WorkspaceId | ParentId | UniqueId | UserId | Os | Host | DefaultCombination | UserCombination | Action |
+---+-------------+----------+----------+--------+----+------+--------------------+-----------------+--------+
+---+-------------+----------+----------+--------+----+------+--------------------+-----------------+--------+

Combination key options

Below you can see a set of combination key information that you can define. dc stands for DefaultCombination and uc stands for UserCombination. These two objects are identical, use first one for your app default shortcuts, and second for user defined series.

OS means the operating system, win32, darwin, etc,

Host means where the combination would be working, such as desktop or browser

It's important to define key sets for all of these environments, and test them. For example, if you are building mac desktop app, you can use CMD+1 for menu options, but the same app in browser must use Option+1 to prevent key collision with browser default hotkeys.

You can see the available options using fireback kbshort create --help, a list similar below will appear

OPTIONS:
   --os value      os
   --host value    host
   --dc-altKey     altKey
   --dc-key value  key
   --dc-metaKey    metaKey
   --dc-shiftKey   shiftKey
   --dc-ctrlKey    ctrlKey
   --uc-altKey     altKey
   --uc-key value  key
   --uc-metaKey    metaKey
   --uc-shiftKey   shiftKey
   --uc-ctrlKey    ctrlKey
   --action value  action

Adding few hot keys:

For example, you can create CMD+CTRL+F to do the action called "Format the page", and the key "FORMAT_PAGE"

Use Action Key as the unique identifier of the action within your apps, Action is what user sees, and could be translated to different languages

fireback kbshort create --dc-metaKey=true --dc-ctrlKey=true --dc-key "KeyF" true --action "Format the page" --actionKey FORMAT_PAGE --host browser --os win32

It would create a result as such:

{
  "uniqueId": "935e0f6e",
  "os": "win32",
  "host": "browser",
  "defaultCombination": {
    "parentId": "935e0f6e",
    "uniqueId": "47477db0",
    "key": "KeyF",
    "metaKey": true,
    "ctrlKey": true
  },
  "userCombination": {
    "parentId": "935e0f6e",
    "uniqueId": "7bc772cd"
  },
  "action": "Format the page",
  "actionKey": "FORMAT_PAGE"
}

Quering these information

Keyboardshortcuts are fully compatible with the ABAC system of fireback, and could be defined, queried, deleted based on the user and workspace. HTTP/GRPC are available completely.

Implementing UI

You can use these information your desired UI, using any Framework. I am working on the reactjs version, which would read these information here and listen to the changes. Officialy yet we are not providing JavaScript or QT libraries, if you have created such elements please contact us.