Fix JS; make buttons sr accessibile; fix overlay

8 files changed, 24 insertions, 15 deletions

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index 1a24c7a6433..6186ffe20b3 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -1,5 +1,6 @@
 /* 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();
-    newNavSidebar.bindEvents();
+    if (Cookies.get('new_nav') === 'true') {
+      const newNavSidebar = new NewNavSidebar();
+      newNavSidebar.bindEvents();
+    }
+
     $(window).on('scroll', _.throttle(applyScrollNavClass, 100));
   });
 }).call(window);
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 2ab8d764a1d..5f98aff8ced 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/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) {
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 0ab5322a7a4..1532ff3940c 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/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%;
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index cef6e022d2b..6ffa1dd97d2 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/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
diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml
index 2b5523f6fad..e58bc66635a 100644
--- a/app/views/layouts/nav/_new_admin_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml
@@ -4,8 +4,9 @@
       .avatar-container.s40.settings-avatar
         = icon('wrench')
       .project-title Admin Area
-    %button.close-nav-button
-      = icon('times')
+    = 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
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
diff --git a/app/views/layouts/nav/_new_group_sidebar.html.haml b/app/views/layouts/nav/_new_group_sidebar.html.haml
index fdb66d827ec..b8a2a36ef2a 100644
--- a/app/views/layouts/nav/_new_group_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_group_sidebar.html.haml
@@ -5,8 +5,9 @@
         = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
       .group-title
         = @group.name
-    %button.close-nav-button
-      = icon('times')
+    = 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
       = link_to group_path(@group), title: 'Home' do
diff --git a/app/views/layouts/nav/_new_profile_sidebar.html.haml b/app/views/layouts/nav/_new_profile_sidebar.html.haml
index ce4eecc6c79..239e6b949e2 100644
--- a/app/views/layouts/nav/_new_profile_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml
@@ -4,8 +4,9 @@
       .avatar-container.s40.settings-avatar
         = icon('user')
       .project-title User Settings
-    %button.close-nav-button
-      = icon('times')
+    = 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
       = link_to profile_path, title: 'Profile Settings' do
diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml
index baf257d06e0..3f5b7caaed9 100644
--- a/app/views/layouts/nav/_new_project_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_project_sidebar.html.haml
@@ -6,8 +6,9 @@
         = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
       .project-title
         = @project.name
-    %button.close-nav-button
-      = icon('times')
+    = 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
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do