From a4b8813a02fe2e915df4c1ac407b6997d688367e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 13 Apr 2018 12:53:04 -0400
Subject: [PATCH] FIX: Header nav should be tabbable and have focus state

---
 .../discourse/widgets/hamburger-menu.js.es6   |  2 +-
 .../discourse/widgets/header.js.es6           |  1 +
 .../discourse/widgets/user-menu.js.es6        |  2 ++
 .../stylesheets/common/base/header.scss       |  3 +-
 .../stylesheets/common/base/menu-panel.scss   | 30 +++++++++++++++----
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6
index d2214077681..b54c7caf4b0 100644
--- a/app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6
+++ b/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)) {
diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6
index 4d4a06c5083..4d8876b6197 100644
--- a/app/assets/javascripts/discourse/widgets/header.js.es6
+++ b/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: {
diff --git a/app/assets/javascripts/discourse/widgets/user-menu.js.es6 b/app/assets/javascripts/discourse/widgets/user-menu.js.es6
index 9b5502e91a8..39313c78e6e 100644
--- a/app/assets/javascripts/discourse/widgets/user-menu.js.es6
+++ b/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'
               })
             )
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 9fdae27b0fa..f3615a4d90b 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/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;
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 1d5c03a476a..013a94da3ac 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/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;