No items found.
December 16, 2013

How to add robust keyboard shortcuts to your site

Power-users love keyboard shortcuts. They save time, and let them interact with your app on autopilot. We recently added keyboard shortcuts to Bugsnag. The hard bit was not choosing which key should do what, as we mostly re-used them from sites our users use like Gmail, Twitter and Github, but adding the shortcuts in a way that was reliable and robust.

Getting started

The first step is to add a keyboard shortcut library. We use ccambell’s mousetrap, which is excellent. The library already handles some edge-cases for us, for example disabling keyboard shortcuts when the user is typing in an input field, and handling punctuation on non-US keyboards.

Next you’ll want to annotate your HTML so that it’s easy to refer to important actions with jQuery. We use the [CODE]data-action[/CODE] attribute for this so that it’s obvious in the markup that the button is important. This makes it less likely we’ll break keyboard shortcuts when refactoring our HTML and CSS.

This is how it looks in practice:

-- CODE language-html --
   <li class="prev disabled">
     <a data-action="prev-page" href="#">‹</a>
   <li class="next">
     <a data-action="next-page" href="/bugsnag/website/errors?offset=2013-12-06">›</a>

You can see that the disabled link to the previous page (shortcut: [CODE][[/CODE]) and the working link to the next page (shortcut [CODE]][/CODE]) both have a separate [CODE]data-action[/CODE].

Wiring it up

Making Mousetrap click a button with jQuery when you press a key is delightfully easy:

-- CODE language-javascript --
Mousetrap.bind('[', function () {

Unfortunately clicking a button with jQuery often isn’t enough. If you want to be able to open actual links using keyboard shortcuts, you need to use the underlying browser [CODE]click()[/CODE] function instead. This requires getting the DOM element out of the jQuery selector, and clicking it if it’s actually there:

-- CODE language-javascript --
Mousetrap.bind('[', function () {
   var button = $('[data-action="prev-page"]');
   if (button.length) {

Edge cases

After I’d added most of our shortcuts I noticed another problem. Like in the example above, sometimes we disabled links or even hid them completely in the UI to prevent the user from interacting with them. It was accidentally still possible to click these links using the keyboard, because we just use jQuery to find them.

As we already had a strong convention that everything on the site that is [CODE]disabled[/CODE] uses the CSS class disabled, it was easy to filter out disabled links. I used jQuery’s [CODE]closest()[/CODE] so that we’d also ignore buttons in disabled sections of the site. I then check whether the element [CODE]is(":visible")[/CODE], which returns true if the button both exists and is visible.

The final code looks like this:

-- CODE language-javascript --
function click(button) {
   if (button.closest(".disabled").length) {
   if (":visible")) {

And it’s now easy to wire up all the shortcuts we need:

-- CODE language-javascript--
Mousetrap.bind('[', function () {
Mousetrap.bind(']', function () {

If you’ve done something similar to this, please let me know, it’d be fun to compare notes :)

BugSnag helps you prioritize and fix software bugs while improving your application stability
Request a demo