User menu a11y changes to allow use of spacebar, escape key and arrow keys or...

User menu a11y changes to allow use of spacebar, escape key and arrow keys or tab and shift+tab to navigate

lms/static/js/my_courses_dropdown.js

 $(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();
+    }
+  }
+});
\ No newline at end of file

lms/templates/navigation.html

@@ -72,12 +72,12 @@ site_status_msg = get_site_status_msg(course_id)
         </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>