When designing applications, we often try to make them accessible for first-time users and create nice UIs mostly designed for mouse or touch interaction. However, there are the pro users who use our applications daily, and they want a quicker, albeit less obvious way to interact.
Unfortunately, for many applications pro users aren’t the largest user demographic and therefore interaction patterns for pro users don’t make the 80-20 cut, especially if significant developer effort is required. angular-keyboard is a library that attempts to make adding keyboard shortcuts to an Angular app as easy as adding a few attributes to already existing interactive elements.
<a ng-click="openSettings()" keyboard-shortcut="s">Open Settings</a>
The above code will register a shortcut, that while the above element is in the DOM,
pressing S on the keyboard is equivalent to clicking on that link (which
in this case will call openSettings()).
Assisting the user
The problem with keyboard shortcuts is that they are difficult to discover.
angular-keyboard solves this problem
in two ways. First, it will add a title attribute to the element which will display
the action name with the shortcut in brackets (so 'Open Settings (S)') in the above
case.
Second, and more noticeably, it adds a keyboard-help directive, that will display a
table of all currently available shortcuts.
(For the following examples, you need to focus the result frame for the keyboard shortcuts to work.)
As we see above, quite a few of these options can be customised through attributes in the directive.
Lists support
A common pattern in todays websites is selecting items in a list and acting on those.
For this purpose angular-keyboard provides a directive that works in cooperation
with ng-repeat to track which element is currently selected.
Conclusion
There are a few more features built-in to make it a breeze to quickly put together a power-user interface. Check out the documentation or the GitHub repo for more information.