Fix JS; make buttons sr accessibile; fix overlay

app/assets/javascripts/layout_nav.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
 import _ from 'underscore';
+import Cookies from 'js-cookie';
 import NewNavSidebar from './new_sidebar';
 (function() {
@@ -54,8 +55,11 @@ import NewNavSidebar from './new_sidebar';
   }
   $(() => {
-    var newNavSidebar = new NewNavSidebar();
+    if (Cookies.get('new_nav') === 'true') {
+      const newNavSidebar = new NewNavSidebar();
       newNavSidebar.bindEvents();
+    }
+
     $(window).on('scroll', _.throttle(applyScrollNavClass, 100));
   });
 }).call(window);

app/assets/javascripts/new_sidebar.js

@@ -11,9 +11,9 @@ export default class NewNavSidebar {
   }
   bindEvents() {
-    this.$openSidebar.on('click', e => this.toggleSidebarNav(e, true));
-    this.$closeSidebar.on('click', e => this.toggleSidebarNav(e, false));
-    this.$overlay.on('click', e => this.toggleSidebarNav(e, false));
+    this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
+    this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
+    this.$overlay.on('click', () => this.toggleSidebarNav(false));
   }
   toggleSidebarNav(show) {

app/assets/stylesheets/new_sidebar.scss

@@ -247,7 +247,7 @@ $new-sidebar-width: 220px;
   &.mobile-nav-open {
     display: block;
-    position: absolute;
+    position: fixed;
     background-color: $black-transparent;
     height: 100%;
     width: 100%;

app/views/layouts/nav/_breadcrumbs.html.haml

@@ -4,7 +4,8 @@
 %nav.breadcrumbs{ role: "navigation" }
   .breadcrumbs-container{ class: [container_class, @content_class] }
     - if defined?(@new_sidebar)
-      %button.toggle-mobile-nav
+      = button_tag class: 'toggle-mobile-nav', type: 'button' do
+        %span.sr-only Open sidebar
         = icon ('bars')
     .breadcrumbs-links.js-title-container
       - unless hide_top_links

app/views/layouts/nav/_new_admin_sidebar.html.haml

@@ -4,7 +4,8 @@
       .avatar-container.s40.settings-avatar
         = icon('wrench')
       .project-title Admin Area
-    %button.close-nav-button
+    = button_tag class: 'close-nav-button', type: 'button' do
+      %span.sr-only Close sidebar
       = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts), html_options: {class: 'home'}) do

app/views/layouts/nav/_new_group_sidebar.html.haml

@@ -5,7 +5,8 @@
         = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
       .group-title
         = @group.name
-    %button.close-nav-button
+    = button_tag class: 'close-nav-button', type: 'button' do
+      %span.sr-only Close sidebar
       = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do

app/views/layouts/nav/_new_profile_sidebar.html.haml

@@ -4,7 +4,8 @@
       .avatar-container.s40.settings-avatar
         = icon('user')
       .project-title User Settings
-    %button.close-nav-button
+    = button_tag class: 'close-nav-button', type: 'button' do
+      %span.sr-only Close sidebar
       = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do

app/views/layouts/nav/_new_project_sidebar.html.haml

@@ -6,7 +6,8 @@
         = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
       .project-title
         = @project.name
-    %button.close-nav-button
+    = button_tag class: 'close-nav-button', type: 'button' do
+      %span.sr-only Close sidebar
       = icon ('times')
   %ul.sidebar-top-level-items
     = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do