front/nav: add access keys

static/css/main.css

@@ -102,6 +102,9 @@ nav.text-nav ul li.active a {
 #top-nav ul li[data-name=help] {
     float: none;
 }
+#top-nav .access-key {
+    text-decoration: underline;
+}
 
 .messages .message {
     padding: 0.5em;

static/html/top_navigation.tpl

@@ -3,7 +3,7 @@
         -->{{#each items}}<!--
             -->{{#if this.available}}<!--
                 --><li data-name='{{@key}}'><!--
-                    --><a href='{{this.url}}'>{{this.name}}</a><!--
+                    --><a href='{{this.url}}' accesskey='{{this.accessKey}}'>{{this.name}}</a><!--
                 --></li><!--
             -->{{/if}}<!--
         -->{{/each}}<!--

static/js/controllers/top_navigation_controller.js

@@ -1,7 +1,8 @@
 'use strict';
 
 class NavigationItem {
-    constructor(name, url) {
+    constructor(accessKey, name, url) {
+        this.accessKey = accessKey;
         this.name = name;
         this.url = url;
         this.available = true;
@@ -15,17 +16,17 @@ class TopNavigationController {
         this.activeItem = null;
 
         this.items = {
-            'home':     new NavigationItem('Home',     '/'),
-            'posts':    new NavigationItem('Posts',    '/posts'),
-            'upload':   new NavigationItem('Upload',   '/upload'),
-            'comments': new NavigationItem('Comments', '/comments'),
-            'tags':     new NavigationItem('Tags',     '/tags'),
-            'users':    new NavigationItem('Users',    '/users'),
-            'account':  new NavigationItem('Account',  '/user/{me}'),
-            'register': new NavigationItem('Register', '/register'),
-            'login':    new NavigationItem('Log in',   '/login'),
-            'logout':   new NavigationItem('Logout',   '/logout'),
-            'help':     new NavigationItem('Help',     '/help'),
+            'home':     new NavigationItem('H', 'Home',     '/'),
+            'posts':    new NavigationItem('P', 'Posts',    '/posts'),
+            'upload':   new NavigationItem('U', 'Upload',   '/upload'),
+            'comments': new NavigationItem('C', 'Comments', '/comments'),
+            'tags':     new NavigationItem('T', 'Tags',     '/tags'),
+            'users':    new NavigationItem('S', 'Users',    '/users'),
+            'account':  new NavigationItem('A', 'Account',  '/user/{me}'),
+            'register': new NavigationItem('R', 'Register', '/register'),
+            'login':    new NavigationItem('L', 'Log in',   '/login'),
+            'logout':   new NavigationItem('O', 'Logout',   '/logout'),
+            'help':     new NavigationItem('E', 'Help',     '/help'),
         };
 
         this.api.authenticated.listen(() => {

static/js/views/top_navigation_view.js

@@ -11,6 +11,13 @@ class TopNavigationView extends BaseView {
 
     render(items) {
         this.navHolder.innerHTML = this.template({items: items});
+        for (let link of this.navHolder.querySelectorAll('a')) {
+            const regex = new RegExp(
+                '(' + link.getAttribute('accesskey') + ')', 'i');
+            link.innerHTML = link.textContent.replace(
+                regex,
+                '<span class="access-key" data-accesskey="$1">$1</span>');
+        }
     }
 
     activate(itemName) {