User menu a11y changes to allow use of spacebar, escape key and arrows to navigate

lms/static/js/my_courses_dropdown.js

@@ -1,9 +1,79 @@
 $(document).ready(function () {
-  $('a.dropdown').toggle(function() {
-    $('ul.dropdown-menu').addClass("expanded");
-    $('a.dropdown').addClass("active");
+  // define variables for code legibility
+  var dropdownMenuToggle = $('a.dropdown');
+  var dropdownMenu = $('ul.dropdown-menu');
+  var menuItems = dropdownMenu.find('a');
+
+  // bind menu toggle click for later use
+  dropdownMenuToggle.toggle(function() {
+    dropdownMenu.addClass("expanded").find('a').first().focus();
+    dropdownMenuToggle.addClass("active").attr("aria-expanded", "true");
   }, function() {
-    $('ul.dropdown-menu').removeClass("expanded");
-    $('a.dropdown').removeClass("active");
+    dropdownMenu.removeClass("expanded");
+    dropdownMenuToggle.removeClass("active").attr("aria-expanded", "false").focus();
   });
-});
+
+  //catch keypresses when focused on dropdownMenuToggle (we only care about spacebar keypresses here)
+  dropdownMenuToggle.on('keydown', function(event){
+    // if space key pressed
+    if ( event.which == 32) {
+      dropdownMenuToggle.click();
+      event.preventDefault();
+    }
+  });
+
+  //catch keypresses when inside dropdownMenu (we want to catch spacebar; escape; up arrow or shift+tab; and down arrow or tab)
+  dropdownMenu.on('keydown', function(event){
+    catchKeyPress($(this), event);
+  });
+
+  function catchKeyPress(object, event) {
+    // get currently focused item
+    var focusedItem = jQuery(':focus');
+
+    // get the number of focusable items
+    var numberOfMenuItems = menuItems.length
+
+    // get the index of the currently focused item
+    var focusedItemIndex = menuItems.index(focusedItem);
+
+    // var to store next focused item index
+    var itemToFocusIndex;
+
+    // if space key pressed
+    if ( event.which == 32) {
+      dropdownMenuToggle.click();
+      event.preventDefault();
+    }
+
+    // if escape key pressed
+    if (event.which == 27) {
+      dropdownMenuToggle.click();
+      event.preventDefault();
+    }
+
+    // if up arrow key pressed or shift+tab
+    if (event.which == 38 || (event.which == 9 && event.shiftKey)) {
+      // if first item go to last
+      if (focusedItemIndex === 0) {
+        menuItems.last().focus();
+      } else {
+        itemToFocusIndex = focusedItemIndex - 1;
+        menuItems.get(itemToFocusIndex).focus();
+      }
+      event.preventDefault();
+    }
+
+    // if down arrow key pressed or tab key
+    if (event.which == 40 || event.which == 9) {
+      // if last item go to first
+      if (focusedItemIndex == numberOfMenuItems - 1) {
+        menuItems.first().focus();
+      } else {
+        itemToFocusIndex = focusedItemIndex + 1;
+        menuItems.get(itemToFocusIndex).focus();
+      }
+      event.preventDefault();
+    }
+  }
+});

lms/templates/navigation.html

@@ -72,12 +72,12 @@ <h2><span class="provider">${course.display_org_with_default | h}:</span> ${cour
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
-        <ul class="dropdown-menu">
+        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
+        <ul class="dropdown-menu" aria-label="More Options" role="menu">
           <%block name="navigation_dropdown_menu_links" >
             <li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li>
           </%block>
-          <li><a href="${reverse('logout')}">${_("Log Out")}</a></li>
+          <li role="presentation"><a href="${reverse('logout')}" role="menuitem">${_("Log Out")}</a></li>
         </ul>
       </li>
     </ol>