From cb83c50d4663532b5b1729b27301d22102c17524 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Mon, 17 Jul 2017 17:33:12 -0500
Subject: Add mobile navigation on project page

---
 app/assets/javascripts/layout_nav.js               |  2 +
 app/assets/javascripts/new_sidebar.js              | 23 +++++
 app/assets/stylesheets/new_nav.scss                |  3 +-
 app/assets/stylesheets/new_sidebar.scss            | 99 +++++++++++++++++-----
 app/views/layouts/nav/_breadcrumbs.html.haml       |  2 +
 .../layouts/nav/_new_project_sidebar.html.haml     | 13 +--
 6 files changed, 114 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/javascripts/new_sidebar.js

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index 71064ccc539..e8f59f30035 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 NewNavSidebar from './new_sidebar';
 
 (function() {
   var hideEndFade;
@@ -53,6 +54,7 @@ import _ from 'underscore';
   }
 
   $(() => {
+    new NewNavSidebar();
     $(window).on('scroll', _.throttle(applyScrollNavClass, 100));
   });
 }).call(window);
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
new file mode 100644
index 00000000000..4aadeb6b462
--- /dev/null
+++ b/app/assets/javascripts/new_sidebar.js
@@ -0,0 +1,23 @@
+const SIDEBAR_EXPANDED_CLASS = 'nav-sidebar-expanded';
+
+export default class NewNavSidebar {
+  constructor() {
+    this.initDomElements();
+    this.bindEvents();
+  }
+
+  initDomElements() {
+    this.$sidebar = $('.nav-sidebar');
+    this.$openSidebar = $('.toggle-mobile-nav');
+    this.$closeSidebar = $('.close-nav-button');
+  }
+
+  bindEvents() {
+    this.$openSidebar.on('click', e => this.toggleSidebarNav(e, true));
+    this.$closeSidebar.on('click', e => this.toggleSidebarNav(e, false));
+  }
+
+  toggleSidebarNav(show) {
+    this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
+  }
+}
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 393d5006e24..03ba0afe940 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -275,8 +275,6 @@ header.navbar-gitlab-new {
 .breadcrumbs {
   display: flex;
   min-height: 60px;
-  padding-top: $gl-padding-top;
-  padding-bottom: $gl-padding-top;
   color: $gl-text-color;
   border-bottom: 1px solid $border-color;
 
@@ -300,6 +298,7 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
+  align-items: center;
 
   .dropdown-menu-projects {
     margin-top: -$gl-padding;
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 82cabefa129..eaf7daaa5cf 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -26,41 +26,75 @@ $new-sidebar-width: 220px;
 }
 
 .context-header {
-  border-bottom: 1px solid $border-color;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  padding: 10px 16px 10px 10px;
-  color: $gl-text-color;
+  position: relative;
 
-  .avatar-container {
-    flex: 0 0 40px;
-    background-color: $white-light;
-  }
-
-  &:hover {
-    background-color: $hover-background;
-    color: $hover-color;
-    border-color: $hover-background;
+  a {
+    border-bottom: 1px solid $border-color;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    padding: 10px 16px 10px 10px;
+    color: $gl-text-color;
 
-    .avatar-container {
-      border-color: transparent;
+    @media (max-width: $screen-xs-max) {
+      padding-right: 30px;
     }
 
-    .settings-avatar {
-      background-color: $indigo-500;
+    &:hover {
+      background-color: $hover-background;
+      color: $hover-color;
+      border-color: $hover-background;
 
-      i {
-        color: $hover-color;
+      .avatar-container {
+        border-color: transparent;
+      }
+
+      .settings-avatar {
+        background-color: $indigo-500;
+
+        i {
+          color: $hover-color;
+        }
       }
     }
   }
 
+  .avatar-container {
+    flex: 0 0 40px;
+    background-color: $white-light;
+  }
+
   .project-title,
   .group-title {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+
+  &:hover {
+    .close-nav-button {
+      color: $white-light;
+    }
+  }
+
+  .close-nav-button {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    background-color: transparent;
+    border: 0;
+    padding: 0 10px;
+
+    @media (max-width: $screen-xs-max) {
+      display: block;
+    }
+
+    &:hover {
+      color: $gl-text-color;
+    }
+  }
 }
 
 .settings-avatar {
@@ -89,6 +123,10 @@ $new-sidebar-width: 220px;
   background-color: $gray-normal;
   box-shadow: inset -2px 0 0 $border-color;
 
+  &.nav-sidebar-expanded {
+    width: $new-sidebar-width;
+  }
+
   a {
     text-decoration: none;
   }
@@ -185,6 +223,25 @@ $new-sidebar-width: 220px;
   }
 }
 
+.toggle-mobile-nav {
+  display: none;
+  background-color: transparent;
+  border: 0;
+  padding: 6px 16px;
+  margin: 0 16px 0 -15px;
+  height: 46px;
+  border-right: 1px solid $gl-text-color-quaternary;
+
+  i {
+    font-size: 20px;
+    color: $gl-text-color-secondary;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    display: inline-block;
+  }
+}
+
 
 // Make issue boards full-height now that sub-nav is gone
 
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index b0c1ab7420f..475d89f1156 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -3,6 +3,8 @@
 
 %nav.breadcrumbs{ role: "navigation" }
   .breadcrumbs-container{ class: [container_class, @content_class] }
+    %button.toggle-mobile-nav
+      = icon ('bars')
     .breadcrumbs-links.js-title-container
       - unless hide_top_links
         .title
diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml
index 7c9822c5a6a..baf257d06e0 100644
--- a/app/views/layouts/nav/_new_project_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_project_sidebar.html.haml
@@ -1,10 +1,13 @@
 .nav-sidebar
   - can_edit = can?(current_user, :admin_project, @project)
-  = link_to project_path(@project), title: @project.name, class: 'context-header' do
-    .avatar-container.s40.project-avatar
-      = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
-    .project-title
-      = @project.name
+  .context-header
+    = link_to project_path(@project), title: @project.name do
+      .avatar-container.s40.project-avatar
+        = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
+      .project-title
+        = @project.name
+    %button.close-nav-button
+      = 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
-- 
cgit v1.2.1


From b4b5ad39932b9f56a16e1d0a8c96f75b32e934fc Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Tue, 18 Jul 2017 11:40:42 -0500
Subject: Make sidebar accessible on mobile

---
 app/assets/javascripts/new_sidebar.js                |  7 ++++---
 app/assets/stylesheets/new_sidebar.scss              | 19 ++++++++++++++++---
 app/views/layouts/_page.html.haml                    |  2 ++
 app/views/layouts/nav/_breadcrumbs.html.haml         |  5 +++--
 app/views/layouts/nav/_new_admin_sidebar.html.haml   | 11 +++++++----
 app/views/layouts/nav/_new_group_sidebar.html.haml   | 13 ++++++++-----
 app/views/layouts/nav/_new_profile_sidebar.html.haml | 11 +++++++----
 7 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 4aadeb6b462..ccf45fd7c97 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -1,5 +1,3 @@
-const SIDEBAR_EXPANDED_CLASS = 'nav-sidebar-expanded';
-
 export default class NewNavSidebar {
   constructor() {
     this.initDomElements();
@@ -8,6 +6,7 @@ export default class NewNavSidebar {
 
   initDomElements() {
     this.$sidebar = $('.nav-sidebar');
+    this.$overlay = $('.mobile-overlay');
     this.$openSidebar = $('.toggle-mobile-nav');
     this.$closeSidebar = $('.close-nav-button');
   }
@@ -15,9 +14,11 @@ 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));
   }
 
   toggleSidebarNav(show) {
-    this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
+    this.$sidebar.toggleClass('nav-sidebar-expanded', show);
+    this.$overlay.toggleClass('mobile-nav-open', show);
   }
 }
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index eaf7daaa5cf..0ab5322a7a4 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -115,7 +115,7 @@ $new-sidebar-width: 220px;
   position: fixed;
   z-index: 400;
   width: $new-sidebar-width;
-  transition: width $sidebar-transition-duration;
+  transition: left $sidebar-transition-duration;
   top: 50px;
   bottom: 0;
   left: 0;
@@ -124,7 +124,7 @@ $new-sidebar-width: 220px;
   box-shadow: inset -2px 0 0 $border-color;
 
   &.nav-sidebar-expanded {
-    width: $new-sidebar-width;
+    left: 0;
   }
 
   a {
@@ -156,7 +156,7 @@ $new-sidebar-width: 220px;
   }
 
   @media (max-width: $screen-xs-max) {
-    width: 0;
+    left: (-$new-sidebar-width);
   }
 }
 
@@ -242,6 +242,19 @@ $new-sidebar-width: 220px;
   }
 }
 
+.mobile-overlay {
+  display: none;
+
+  &.mobile-nav-open {
+    display: block;
+    position: absolute;
+    background-color: $black-transparent;
+    height: 100%;
+    width: 100%;
+    z-index: 300;
+  }
+}
+
 
 // Make issue boards full-height now that sub-nav is gone
 
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index cc9219cb6fe..7734c1d8be3 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -10,6 +10,8 @@
     - if content_for?(:sub_nav)
       = yield :sub_nav
   .content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
+    - if show_new_nav?
+      .mobile-overlay
     .alert-wrapper
       = render "layouts/broadcast"
       - if show_new_nav?
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index 475d89f1156..cef6e022d2b 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -3,8 +3,9 @@
 
 %nav.breadcrumbs{ role: "navigation" }
   .breadcrumbs-container{ class: [container_class, @content_class] }
-    %button.toggle-mobile-nav
-      = icon ('bars')
+    - if defined?(@new_sidebar)
+      %button.toggle-mobile-nav
+        = icon ('bars')
     .breadcrumbs-links.js-title-container
       - unless hide_top_links
         .title
diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml
index d7a9e530983..2b5523f6fad 100644
--- a/app/views/layouts/nav/_new_admin_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml
@@ -1,8 +1,11 @@
 .nav-sidebar
-  = link_to admin_root_path, title: 'Admin Overview', class: 'context-header' do
-    .avatar-container.s40.settings-avatar
-      = icon('wrench')
-    .project-title Admin Area
+  .context-header
+    = link_to admin_root_path, title: 'Admin Overview' do
+      .avatar-container.s40.settings-avatar
+        = icon('wrench')
+      .project-title Admin Area
+    %button.close-nav-button
+      = 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 c80308ed0de..fdb66d827ec 100644
--- a/app/views/layouts/nav/_new_group_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_group_sidebar.html.haml
@@ -1,9 +1,12 @@
 .nav-sidebar
-  = link_to group_path(@group), title: @group.name, class: 'context-header' do
-    .avatar-container.s40.group-avatar
-      = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
-    .group-title
-      = @group.name
+  .context-header
+    = link_to group_path(@group), title: @group.name do
+      .avatar-container.s40.group-avatar
+        = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
+      .group-title
+        = @group.name
+    %button.close-nav-button
+      = 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 033ea149cfb..ce4eecc6c79 100644
--- a/app/views/layouts/nav/_new_profile_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml
@@ -1,8 +1,11 @@
 .nav-sidebar
-  = link_to profile_path, title: 'Profile Settings', class: 'context-header' do
-    .avatar-container.s40.settings-avatar
-      = icon('user')
-    .project-title User Settings
+  .context-header
+    = link_to profile_path, title: 'Profile Settings' do
+      .avatar-container.s40.settings-avatar
+        = icon('user')
+      .project-title User Settings
+    %button.close-nav-button
+      = 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
-- 
cgit v1.2.1


From 49ee81ca12e46a703e999632efcb9f2a5627c930 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Tue, 18 Jul 2017 16:40:50 -0500
Subject: Fix eslint

---
 app/assets/javascripts/layout_nav.js  | 3 ++-
 app/assets/javascripts/new_sidebar.js | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index e8f59f30035..1a24c7a6433 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -54,7 +54,8 @@ import NewNavSidebar from './new_sidebar';
   }
 
   $(() => {
-    new NewNavSidebar();
+    var 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 ccf45fd7c97..2ab8d764a1d 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -1,7 +1,6 @@
 export default class NewNavSidebar {
   constructor() {
     this.initDomElements();
-    this.bindEvents();
   }
 
   initDomElements() {
-- 
cgit v1.2.1


From b711e10093f303c2d35aa3ebe9aff1c30c74ae7c Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 19 Jul 2017 20:26:18 -0500
Subject: Fix JS; make buttons sr accessibile; fix overlay

---
 app/assets/javascripts/layout_nav.js                 | 8 ++++++--
 app/assets/javascripts/new_sidebar.js                | 6 +++---
 app/assets/stylesheets/new_sidebar.scss              | 2 +-
 app/views/layouts/nav/_breadcrumbs.html.haml         | 3 ++-
 app/views/layouts/nav/_new_admin_sidebar.html.haml   | 5 +++--
 app/views/layouts/nav/_new_group_sidebar.html.haml   | 5 +++--
 app/views/layouts/nav/_new_profile_sidebar.html.haml | 5 +++--
 app/views/layouts/nav/_new_project_sidebar.html.haml | 5 +++--
 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
-- 
cgit v1.2.1