Enable tab navigation in the main content area using alt+tab

Fixes #77

assets/javascripts/app/shortcuts.coffee

@@ -95,6 +95,8 @@ class app.Shortcuts
 
   handleKeydownAltEvent: (event) ->
     switch event.which
+      when 9
+        @trigger 'altTab', event
       when 38
         @trigger 'altUp'
         false

assets/javascripts/templates/pages/help_tmpl.coffee

@@ -77,6 +77,9 @@ app.templates.helpPage = """
   </dl>
   <h3 class="_shortcuts-title">Misc</h3>
   <dl class="_shortcuts-dl">
+    <dt class="_shortcuts-dt">
+      <code class="_shortcut-code">alt + tab</code>
+    <dd class="_shortcuts-dd">Focus first link in the content area<br>(press tab to focus the other links)
     <dt class="_shortcuts-dt">
       <code class="_shortcut-code">alt + r</code>
     <dd class="_shortcuts-dd">Reveal current page in sidebar

assets/javascripts/views/content/content.coffee

@@ -12,6 +12,7 @@ class app.views.Content extends app.View
     pageDown: 'scrollPageDown'
     home:     'scrollToTop'
     end:      'scrollToBottom'
+    altTab:   'onAltTab'
 
   @routes:
     before: 'beforeRoute'
@@ -150,6 +151,11 @@ class app.views.Content extends app.View
       $.popup(link)
     return
 
+  onAltTab: (event) =>
+    unless document.activeElement and $.hasChild @el, document.activeElement
+      @findByTag('a').focus()
+      $.stopEvent(event)
+
   findTargetByHash: (hash) ->
     try $.id decodeURIComponent(hash) catch
 

assets/stylesheets/components/_header.scss

@@ -16,6 +16,8 @@
   box-shadow: inset 0 1px rgba(white, .8),  // top inner glow
               inset 0 -1px rgba(white, .3); // bottom inner glow
   @extend %user-select-none;
+
+  a:focus { outline: 0; }
 }
 
 //

assets/stylesheets/components/_path.scss

@@ -17,6 +17,7 @@
   @media #{$mediumScreen} { left: $sidebarMediumWidth; }
 
   ~ ._container { padding-bottom: 2rem; }
+  a:focus { outline: 0; }
 }
 
 ._path-item {

assets/stylesheets/components/_sidebar.scss

@@ -33,6 +33,8 @@
       border-width: 2px;
     }
   }
+
+  a:focus { outline: 0; }
 }
 
 //

assets/stylesheets/global/_base.scss

@@ -28,8 +28,6 @@ a {
     color: $linkColorHover;
     text-decoration: underline;
   }
-
-  &:focus { outline: 0; }
 }
 
 img {