From 118afcd37f7a840ad54e7cc1a0279d4ad56acb6f Mon Sep 17 00:00:00 2001 From: Jareer Ahsan Date: Wed, 24 Aug 2016 17:20:22 +0500 Subject: [PATCH] ECOM-4945 Fixed Shift-Tab on menu TNL-5437 Reverted to no RequireJS --- lms/static/js/my_courses_dropdown.js | 152 ++++++++++++++------------- 1 file changed, 79 insertions(+), 73 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index 8155b1317b..3529816e40 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -1,87 +1,93 @@ -(function(require) { +$(document).ready(function() { 'use strict'; - require([ - 'jquery', - 'edx-ui-toolkit/js/utils/constants' - ], function($, constants) { - // define variables for code legibility - var $dropdownMenuToggle = $('.dropdown'); - var $dropdownMenu = $('.dropdown-menu'); - var menuItems = $dropdownMenu.find('.dropdown-menuitem'); + // define variables for code legibility + var $dropdownMenuToggle = $('.dropdown'); + var $dropdownMenu = $('.dropdown-menu'); + var menuItems = $dropdownMenu.find('.dropdown-menuitem'); - // bind menu toggle click for later use - $dropdownMenuToggle.toggle(function() { - $dropdownMenu.addClass('expanded').find('.dropdown-menuitem').first() - .focus(); - $dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true'); - }, function() { - $dropdownMenu.removeClass('expanded'); - $dropdownMenuToggle.removeClass('active').attr('aria-expanded', 'false').focus(); - }); + var keyCodes = { + leftArrow: 37, + upArrow: 38, + rightArrow: 39, + downArrow: 40, + tab: 9, + escape: 27, + space: 32 + }; - // 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 === constants.keyCodes.space) { - $dropdownMenuToggle.click(); - event.preventDefault(); - } - }); - function catchKeyPress(object, event) { - // get currently focused item - var focusedItem = jQuery(':focus'); + // bind menu toggle click for later use + $dropdownMenuToggle.toggle(function() { + $dropdownMenu.addClass('expanded').find('.dropdown-menuitem').first() + .focus(); + $dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true'); + }, function() { + $dropdownMenu.removeClass('expanded'); + $dropdownMenuToggle.removeClass('active').attr('aria-expanded', 'false').focus(); + }); - // get the number of focusable items - var numberOfMenuItems = menuItems.length; + // 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 === keyCodes.space) { + $dropdownMenuToggle.click(); + event.preventDefault(); + } + }); - // get the index of the currently focused item - var focusedItemIndex = menuItems.index(focusedItem); + function catchKeyPress(object, event) { + // get currently focused item + var focusedItem = jQuery(':focus'); - // var to store next focused item index - var itemToFocusIndex; + // get the number of focusable items + var numberOfMenuItems = menuItems.length; - // if space key pressed - if (event.which === constants.keyCodes.space) { - $dropdownMenuToggle.click(); - event.preventDefault(); - } + // get the index of the currently focused item + var focusedItemIndex = menuItems.index(focusedItem); - // if escape key pressed - if (event.which === constants.keyCodes.esc) { - $dropdownMenuToggle.click(); - event.preventDefault(); - } + // var to store next focused item index + var itemToFocusIndex; - // if up arrow key pressed or shift+tab else down key or tab is pressed - if (event.which === constants.keyCodes.up || event.which === constants.keyCodes.left || - (event.which === constants.keyCodes.tab && event.shiftKey)) { - // if first item go to last - if (focusedItemIndex === 0) { - menuItems.last().focus(); - } else { - itemToFocusIndex = focusedItemIndex - 1; - menuItems.get(itemToFocusIndex).focus(); - } - event.preventDefault(); - } else if (event.which === constants.keyCodes.down || event.which === constants.keyCodes.right || - event.which === constants.keyCodes.tab) { - // if last item go to first - if (focusedItemIndex === numberOfMenuItems - 1) { - menuItems.first().focus(); - } else { - itemToFocusIndex = focusedItemIndex + 1; - menuItems.get(itemToFocusIndex).focus(); - } - event.preventDefault(); - } + // if space key pressed + if (event.which === keyCodes.space) { + $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); - }); + // if escape key pressed + if (event.which === keyCodes.escape) { + $dropdownMenuToggle.click(); + event.preventDefault(); + } + + // if up arrow key pressed or shift+tab else down key or tab is pressed + if (event.which === keyCodes.upArrow || event.which === keyCodes.leftArrow || + (event.which === keyCodes.tab && event.shiftKey)) { + // if first item go to last + if (focusedItemIndex === 0) { + menuItems.last().focus(); + } else { + itemToFocusIndex = focusedItemIndex - 1; + menuItems.get(itemToFocusIndex).focus(); + } + event.preventDefault(); + } else if (event.which === keyCodes.downArrow || event.which === keyCodes.rightArrow || + event.which === keyCodes.tab) { + // if last item go to first + if (focusedItemIndex === numberOfMenuItems - 1) { + menuItems.first().focus(); + } else { + itemToFocusIndex = focusedItemIndex + 1; + menuItems.get(itemToFocusIndex).focus(); + } + 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); }); -}).call(this, require || RequireJS.require); +});