Configure keyboard shortcuts

Add keyboard shortcuts for the frequently used interface elements. This way you can help your users: keyboard combinations are somewhat faster than mouse clicks.

In Yandex.Toloka, shortcuts are particularly helpful because performers will do your tasks faster and you can pay less for the tasks. Moreover, shortcuts help you increase the rating of your project if it falls short on “Interface usability”.

Shortcut features

Shortcuts are digits or letters shown next to buttons. Shortcuts help users do an action by pressing a key.

A shortcut is always added to a button if they do the same thing.

Keyboard shortcuts are independent of the interface. They work even if they are not displayed, like if you set up a shortcut without setting up a button.

How to configure shortcuts

Use a separate plugin to configure shortcuts: plugin.hotkeys. Use this plugin to assign keys to actions. Plugins are added to the plugins array in the configuration root.

  {
    "type": "plugin.hotkeys",
    "p": {
      "type": "action.play-pause",
      "view": {
        "$ref": "view.items.0"
      }
    }
  }

In this example, pressing P triggers the action.play-pause action. It starts or pauses playback in the player. The player is specified in the view property by using the $ref structure: it links to another place in the configuration.

View example in the sandbox

Tip. Mind the keyboard layout when setting up shortcuts: if you choose a character that looks similar in the Cyrillic and Latin layouts, this might confuse the user.

Radio buttons and checkboxes

Use the action.set component to set up shortcuts for radio buttons. For checkboxes, use action.toggle. Assign shortcuts to actions that your radio buttons or checkboxes do.

View example in the sandbox

Reusing shortcuts

You can reuse shortcuts just like any other code fragments. To do this, use the structure { "$ref": "path.to.element" }. Reuse is helpful when you need to insert the same shortcuts in multiple places in your code.

View example in the sandbox

Tip. Put your reused code into vars so that you don't have to change the path in the $ref property when you change the configuration.

Doing multiple actions

For the user to trigger multiple actions by pressing a button, add the action.bulk component. For example, you can use it to show multiple notifications.

View example in the sandbox

Conditions in shortcuts

If you use a condition (helper.if or helper.switch), add it to the shortcut also to ensure consistency.

If you set up a shortcut without a condition, the shortcut will still work, but won't be visualized. This might cause errors.

Here is an example of an error. In this example, if the user responds Yes, they see another question. But they can use keyboard shortcuts to respond to it, although it's not shown in the interface.

View an example with an error in the sandbox

View the corrected example in the sandbox