Remove outline: 0 and add keyboard accessibility for nav menu (#1132)

app/assets/javascripts/initializers/initializeBaseUserData.js

@@ -1,6 +1,6 @@
 function initializeBaseUserData(){
   var user = userData()
-  var userProfileLinkHTML = '<a href="/'+user.username+'"><div class="option prime-option">@'+user.username+'</div></a>'
+  var userProfileLinkHTML = '<a href="/'+user.username+'" id="first-nav-link"><div class="option prime-option">@'+user.username+'</div></a>'
   document.getElementById("user-profile-link-placeholder").innerHTML = userProfileLinkHTML;
   document.getElementById("nav-profile-image").src = user.profile_image_90;
   initializeUserSidebar(user);

app/assets/javascripts/initializers/initializeTouchDevice.js

@@ -12,6 +12,28 @@ function initializeTouchDevice() {
       }
     } else {
       document.getElementById("navbar-menu-wrapper").classList.add('desktop')
+      document.getElementById("navigation-butt").onfocus = function(e){
+        document.getElementById("navbar-menu-wrapper").classList.add('showing');
+      }
+      document.getElementById("last-nav-link").onblur = function(e) {
+        setTimeout(function(){
+          console.log(document.activeElement)
+          if (document.activeElement != document.getElementById("second-last-nav-link")) {
+            document.getElementById("navbar-menu-wrapper").classList.remove('showing');
+          }
+        }, 10)
+      }
+      document.getElementById("navigation-butt").onblur = function(e){
+        setTimeout(function(){
+          console.log(document.activeElement)
+          if (document.activeElement != document.getElementById("first-nav-link")) {
+            document.getElementById("navbar-menu-wrapper").classList.remove('showing');
+          }
+        }, 10)
+      }
+    }
+    document.getElementById("menubg").onclick = function(e) {
+      document.getElementById("navbar-menu-wrapper").classList.remove('showing');
     }
   },10)
 }

app/assets/stylesheets/scaffolds.scss

@@ -9,9 +9,7 @@ body {
   margin:0 !important;
   margin-top:-20px !important;
   overflow-y:scroll;
-  :focus {
-  outline: 0;
-  }
+
 }
 
 .ptr--ptr{
@@ -95,3 +93,7 @@ button{
 input[type="submit"]{
   cursor:pointer;
 };
+
+input[type="text"],textarea, input[type="url"], input[type="email"]{
+  outline: 0;
+}

app/assets/stylesheets/top-bar.scss

@@ -177,7 +177,7 @@
         }
       }
       &.desktop {
-        &:hover {
+        &:hover,&:active,&:focus {
           .menu {
             display: block;
           }

app/views/layouts/_nav_menu.html.erb

@@ -25,12 +25,12 @@
         Settings
       </div>
     </a>
-    <a href="/p/information">
+    <a href="/p/information" id="second-last-nav-link">
       <div class="option">
         Key Links
       </div>
     </a>    
-    <a href="/signout_confirm" data-no-instant>
+    <a href="/signout_confirm" data-no-instant id="last-nav-link">
       <div class="option">
         Sign Out
       </div>
@@ -38,7 +38,7 @@
   </div>
 <% else %>
   <div class="menu logged-out" id="loggedoutmenu">
-    <a href="/enter" data-no-instant>
+    <a href="/enter" data-no-instant id="first-nav-link">
       <div class="header">
         Sign In/Up
       </div>
@@ -48,12 +48,12 @@
         Via Twitter
       </div>
     </a>
-    <a href="/users/auth/github?state=navbar_basic" data-no-instant>
+    <a href="/users/auth/github?state=navbar_basic" data-no-instant id="second-last-nav-link">
       <div class="option">
         Via GitHub
       </div>
     </a>
-    <a href="/p/information">
+    <a href="/p/information" id="last-nav-link">
       <div class="option">
         All about dev.to
       </div>