my_courses_dropdown.js

$(document).ready(function () {
  // 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() {
    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();
    }
  }
});