Revert "Revert "Revert "Revert "Nav accessibility""""

apps/src/hamburger/hamburger.js

@@ -13,12 +13,31 @@ export const initHamburger = function() {
       e.preventDefault();
     });
 
-    $(document).on('click', function(e) {
+    // allows users to toggle help menu by pressing return
+    // while tabbing through elements
+    $('#hamburger').on('keypress', function(e) {
+      if (
+        e.type === 'keypress' &&
+        e.which === 13 &&
+        e.target.className !== 'hamburger-expandable-item item'
+      ) {
+        $(this).toggleClass('active');
+        $('#hamburger-icon').toggleClass('active');
+        $('#hamburger #hamburger-contents').slideToggle();
+        e.preventDefault();
+      }
+    });
+
+    $(document).on('keypress click', function(e) {
       var hamburger = $('#hamburger');
 
       // If we didn't click the hamburger itself, and also nothing inside it,
       // then hide it.
-      if (!hamburger.is(e.target) && hamburger.has(e.target).length === 0) {
+      if (
+        !hamburger.is(e.target) &&
+        hamburger.has(e.target).length === 0 &&
+        e.target.className !== 'hamburger-expandable-item item'
+      ) {
         hamburger.children('#hamburger-contents').slideUp();
         $('#hamburger-icon').removeClass('active');
       }
@@ -34,15 +53,17 @@ export const initHamburger = function() {
     });
 
     $('.hamburger-expandable-item').each(function() {
-      $(this).click(function(e) {
-        $('#' + $(this).attr('id') + '-items').slideToggle();
-        $(this)
-          .find('.arrow-down')
-          .toggle();
-        $(this)
-          .find('.arrow-up')
-          .toggle();
-        e.preventDefault();
+      $(this).on('keypress click', function(e) {
+        if ((e.type === 'keypress' && e.which === 13) || e.type === 'click') {
+          $('#' + $(this).attr('id') + '-items').slideToggle();
+          $(this)
+            .find('.arrow-down')
+            .toggle();
+          $(this)
+            .find('.arrow-up')
+            .toggle();
+          e.preventDefault();
+        }
       });
     });
 
@@ -52,6 +73,16 @@ export const initHamburger = function() {
       e.preventDefault();
     });
 
+    // allows users to toggle help menu by pressing return
+    // while tabbing through elements
+    $('#help-button').on('keypress', function(e) {
+      if (e.type === 'keypress' && e.which === 13) {
+        $(this).toggleClass('active');
+        $('#help-button #help-contents').slideToggle();
+        e.preventDefault();
+      }
+    });
+
     $('#help-icon #report-bug').click(function() {
       trackEvent('help_ui', 'report-bug', 'hamburger');
     });

shared/haml/hamburger.haml

@@ -2,13 +2,13 @@
   options = { level: level, script_level: script_level, language: language, user_type: user_type, loc_prefix: loc_prefix, request: request }
   contents = Hamburger.get_hamburger_contents(options)
 
-#hamburger{class: contents[:visibility]}
+#hamburger{class: contents[:visibility], tabindex: "0", 'aria-label': I18n.t('header_screen_reader_hamburger')}
   #hamburger-contents.hide-responsive-menu
     - contents[:entries].each do |entry|
       - if entry[:type] == "divider"
         .divider{id: entry[:id], class: entry[:class]}
       - elsif entry[:type] == "expander"
-        .hamburger-expandable-item.item{id: entry[:id]}
+        .hamburger-expandable-item.item{id: entry[:id], tabindex: "0"}
           .text= entry[:title]
           %i.arrow-down{class: "fa fa-caret-down"}
           %i.arrow-up{class: "fa fa-caret-up"}

shared/haml/help_button.haml

@@ -5,7 +5,7 @@
 
   help_items = HelpHeader.get_help_contents(options)
 
-.help_button{class: "hide-mobile", id: "help-button"}
+.help_button{class: "hide-mobile", id: "help-button", tabindex: "0", 'aria-label': I18n.t('header_screen_reader_help')}
   .help_contents{style: 'display: none', id: "help-contents"}
     - help_items.each do |entry|
       %a.linktag{id: entry[:id], href: entry[:url], target: entry[:target], rel: entry[:rel]}=entry[:title]

shared/haml/user_header.haml

@@ -34,7 +34,7 @@
         .project_link#view_all_projects
           = I18n.t("#{loc_prefix}view_all")
 - if current_user
-  .header_button.header_user.user_menu
+  %button.header_button.header_user.user_menu
     - if current_user.can_pair? && session_pairings.present?
       %i.fa.fa-users.pairing_icon
       %span.pairing_name= I18n.t("#{loc_prefix}team")
@@ -111,7 +111,7 @@
           $('.user_options').slideDown();
           $('.user_menu_arrow_down').hide();
           $('.user_menu_arrow_up').show();
-          $(document).on('click', hideUserOptions);
+          $(document).on('keypress click', hideUserOptions);
           hideCreateOptions()
           $("#hamburger-icon").removeClass('active');
           $("#help-icon").removeClass('active');