Introducing angular-keyboard

We've open sourced angular-keyboard, which is a declarative way to add keyboard navigation to Angular apps.

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.