client/top-nav: reuse makeAccessLink

client/css/main.styl

@@ -111,6 +111,9 @@ nav.text-nav
             background: $focused-tab-background-color
             outline: 0
 
+a .access-key
+    text-decoration: underline
+
 #top-nav
     background: $top-nav-color
     margin: 0

client/html/top_nav.tpl

@@ -5,7 +5,7 @@
                 --><li data-name='<%= key %>'><!--
                     --><a href='<%= item.url %>' accesskey='<%= item.accessKey %>'><!--
                         --><% if (item.imageUrl) { print(ctx.makeThumbnail(item.imageUrl)); } %><!--
-                        --><span class='text'><%- item.name %></span><!--
+                        --><span class='text'><%= ctx.makeAccessKey(item.name, item.accessKey) %></span><!--
                     --></a><!--
                 --></li><!--
             --><% } %><!--

client/js/util/views.js

@@ -159,6 +159,13 @@ function makeFlexboxAlign(options) {
         .map(() => '<li class="flexbox-dummy"></li>').join('');
 }
 
+function makeAccessKey(html, key) {
+    const regex = new RegExp('(' + key + ')', 'i');
+    html = html.replace(
+        regex, '<span class="access-key" data-accesskey="$1">$1</span>');
+    return html;
+}
+
 function _serializeElement(name, attributes) {
     return [name]
         .concat(Object.keys(attributes).map(key => {
@@ -260,6 +267,7 @@ function getTemplate(templatePath) {
             makeColorInput: makeColorInput,
             makeTagLink: makeTagLink,
             makeFlexboxAlign: makeFlexboxAlign,
+            makeAccessKey: makeAccessKey,
         });
         return htmlToDom(templateFactory(ctx));
     };

client/js/views/top_nav_view.js

@@ -12,14 +12,6 @@ class TopNavView {
         const target = this._navHolder;
         const source = this._template(ctx);
 
-        for (let link of source.querySelectorAll('a')) {
-            const regex = new RegExp(
-                '(' + link.getAttribute('accesskey') + ')', 'i');
-            const span = link.querySelector('span.text');
-            span.innerHTML = span.textContent.replace(
-                regex,
-                '<span class="access-key" data-accesskey="$1">$1</span>');
-        }
 
         views.showView(this._navHolder, source);
     }