Skip to content

E
edx-platform
Commit 118afcd3 by Jareer Ahsan Committed by Jareer Ahsan
Options

ECOM-4945 Fixed Shift-Tab on menu 

TNL-5437 Reverted to no RequireJS
parent e6b5cc9e
Showing with 78 additions and 72 deletions
lms/static/js/my_courses_dropdown.js
(function(require) { $(document).ready(function() {
'use strict'; 'use strict';
require([ // define variables for code legibility
'jquery', var $dropdownMenuToggle = $('.dropdown');
'edx-ui-toolkit/js/utils/constants' var $dropdownMenu = $('.dropdown-menu');
], function($, constants) { 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 var keyCodes = {
$dropdownMenuToggle.toggle(function() { leftArrow: 37,
$dropdownMenu.addClass('expanded').find('.dropdown-menuitem').first() upArrow: 38,
.focus(); rightArrow: 39,
$dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true'); downArrow: 40,
}, function() { tab: 9,
$dropdownMenu.removeClass('expanded'); escape: 27,
$dropdownMenuToggle.removeClass('active').attr('aria-expanded', 'false').focus(); 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) { // bind menu toggle click for later use
// get currently focused item $dropdownMenuToggle.toggle(function() {
var focusedItem = jQuery(':focus'); $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 // catch keypresses when focused on $dropdownMenuToggle (we only care about spacebar keypresses here)
var numberOfMenuItems = menuItems.length; $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 function catchKeyPress(object, event) {
var focusedItemIndex = menuItems.index(focusedItem); // get currently focused item
var focusedItem = jQuery(':focus');
// var to store next focused item index // get the number of focusable items
var itemToFocusIndex; var numberOfMenuItems = menuItems.length;
// if space key pressed // get the index of the currently focused item
if (event.which === constants.keyCodes.space) { var focusedItemIndex = menuItems.index(focusedItem);
$dropdownMenuToggle.click();
event.preventDefault();
}
// if escape key pressed // var to store next focused item index
if (event.which === constants.keyCodes.esc) { var itemToFocusIndex;
$dropdownMenuToggle.click();
event.preventDefault();
}
// if up arrow key pressed or shift+tab else down key or tab is pressed // if space key pressed
if (event.which === constants.keyCodes.up || event.which === constants.keyCodes.left || if (event.which === keyCodes.space) {
(event.which === constants.keyCodes.tab && event.shiftKey)) { $dropdownMenuToggle.click();
// if first item go to last event.preventDefault();
if (focusedItemIndex === 0) { }
menuItems.last().focus();
} else { // if escape key pressed
itemToFocusIndex = focusedItemIndex - 1; if (event.which === keyCodes.escape) {
menuItems.get(itemToFocusIndex).focus(); $dropdownMenuToggle.click();
} event.preventDefault();
event.preventDefault(); }
} else if (event.which === constants.keyCodes.down || event.which === constants.keyCodes.right ||
event.which === constants.keyCodes.tab) { // if up arrow key pressed or shift+tab else down key or tab is pressed
// if last item go to first if (event.which === keyCodes.upArrow || event.which === keyCodes.leftArrow ||
if (focusedItemIndex === numberOfMenuItems - 1) { (event.which === keyCodes.tab && event.shiftKey)) {
menuItems.first().focus(); // if first item go to last
} else { if (focusedItemIndex === 0) {
itemToFocusIndex = focusedItemIndex + 1; menuItems.last().focus();
menuItems.get(itemToFocusIndex).focus(); } else {
} itemToFocusIndex = focusedItemIndex - 1;
event.preventDefault(); 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 // catch keypresses when inside $dropdownMenu
// (we want to catch spacebar; escape; up arrow or shift+tab; and down arrow or tab) // (we want to catch spacebar; escape; up arrow or shift+tab; and down arrow or tab)
$dropdownMenu.on('keydown', function(event) { $dropdownMenu.on('keydown', function(event) {
catchKeyPress($(this), event); catchKeyPress($(this), event);
});
}); });
}).call(this, require || RequireJS.require); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment