FIX: Header nav should be tabbable and have focus state

app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6

@@ -153,7 +153,7 @@ export default createWidget('hamburger-menu', {
 
     const { site } = this;
     if (!site.mobileView && !this.capabilities.touch) {
-      links.push({ action: 'showKeyboard', className: 'keyboard-shortcuts-link', label: 'keyboard_shortcuts_help.title' });
+      links.push({ href: '', action: 'showKeyboard', className: 'keyboard-shortcuts-link', label: 'keyboard_shortcuts_help.title' });
     }
 
     if (this.site.mobileView || (this.siteSettings.enable_mobile_theme && this.capabilities.touch)) {

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -138,6 +138,7 @@ createWidget('header-icons', {
                         iconId: 'toggle-hamburger-menu',
                         active: attrs.hamburgerVisible,
                         action: 'toggleHamburger',
+                        href: '',
                         contents() {
                           if (!attrs.flagCount) { return; }
                           return h('div.badge-notification.flagged-posts', { attributes: {

app/assets/javascripts/discourse/widgets/user-menu.js.es6

@@ -99,6 +99,7 @@ createWidget('user-menu-dismiss-link', {
           attrs=(hash
             action="dismissNotifications"
             className="dismiss"
+            tabindex="0"
             icon="check"
             label="user.dismiss"
             title="user.dismiss_notifications_tooltip")}}
@@ -144,6 +145,7 @@ export default createWidget('user-menu', {
                 action: 'logout',
                 className: 'logout',
                 icon: 'sign-out',
+                href: '',
                 label: 'user.log_out'
               })
             )

app/assets/stylesheets/common/base/header.scss

@@ -86,11 +86,12 @@
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
     transition: all linear .15s;
+    outline: none;
     img.avatar {
       width: 2.2857em;
       height: 2.2857em;
     }
-    &:hover {
+    &:hover, &:focus { 
       color: $primary;
       background-color: $primary-low;
       border-top: 1px solid transparent;

app/assets/stylesheets/common/base/menu-panel.scss

@@ -59,8 +59,9 @@
     a {
       padding: 0.25em 0.5em;
       display: block;
-      &:hover {
+      &:hover, &:focus {
         background-color: $highlight-medium;
+        outline: none;
       }
     }
 
@@ -243,9 +244,19 @@
         display: none;
       }
 
-      span { color: $primary; }
-      &:hover { background-color: $highlight-medium; }
-      a { padding: 0; }
+      span { 
+        color: $primary; 
+      }
+
+      &:hover, &:focus { 
+        background-color: $highlight-medium; 
+        outline: none; 
+      }
+
+      a { 
+        padding: 0; 
+      }
+
       p {
         margin: 0;
         overflow: hidden;
@@ -318,9 +329,18 @@ div.menu-links-header {
   border-spacing: 0 0.5em;
   .menu-links-row {
     display: table-row;
+    li.glyphs {
+      text-align: right;
+      a {
+        display: inline-flex;
+        min-width: 15px;
+        justify-content: center;
+      } 
+    }
   }
-  a:hover {
+  a:hover, a:focus {
     background-color: $highlight-medium;
+    outline: none;
   }
   a {
     padding: 0.5em;