From 6e988443f67b56e8022fe14a45c44be569944900 Mon Sep 17 00:00:00 2001 From: Giulio Gratta Date: Fri, 1 Nov 2013 13:16:16 -0700 Subject: [PATCH] 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 | 82 ++++++++++++++++++++++++++-- lms/templates/navigation.html | 6 +- 2 files changed, 79 insertions(+), 9 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index afd0f21686d9..5b76341b9a9e 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/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(); + } + } +}); \ No newline at end of file diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index b1e4c091e0ff..2dc571c24700 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -72,12 +72,12 @@

${course.display_org_with_default | h}: ${cour
  • - ${_("More options dropdown")} ▾ -