From 793622b44ccc566f1477f7e24dda1b04702de23c Mon Sep 17 00:00:00 2001 From: Jareer Ahsan Date: Wed, 24 Aug 2016 17:20:22 +0500 Subject: [PATCH 1/5] Fixed Shift-Tab on menu and ARIA roles, groups ECOM-4945 --- lms/static/js/my_courses_dropdown.js | 11 +++----- lms/templates/user_dropdown.html | 38 +++++++++++++++------------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index 88d6861f5f..fe2a9f9ff1 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -54,9 +54,9 @@ $(document).ready(function() { event.preventDefault(); } - // if up arrow key pressed or shift+tab + // if up arrow key pressed or shift+tab else down key or tab is pressed if (event.which == 38 || (event.which == 9 && event.shiftKey)) { - // if first item go to last + // if first item go to last if (focusedItemIndex === 0) { menuItems.last().focus(); } else { @@ -64,11 +64,8 @@ $(document).ready(function() { 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 + } else if (event.which == 40 || event.which == 9) { + // if last item go to first if (focusedItemIndex == numberOfMenuItems - 1) { menuItems.first().focus(); } else { diff --git a/lms/templates/user_dropdown.html b/lms/templates/user_dropdown.html index 1c272a812b..b46698957a 100644 --- a/lms/templates/user_dropdown.html +++ b/lms/templates/user_dropdown.html @@ -20,18 +20,20 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_ ${username} - - +
+ + +
% else:
    @@ -47,11 +49,13 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
  1. - - +
    + + +
% endif From 05b89f05c49560302f2d2b01e4c29c1230143351 Mon Sep 17 00:00:00 2001 From: Jareer Ahsan Date: Wed, 24 Aug 2016 18:53:56 +0500 Subject: [PATCH 2/5] Quality fix, == to === --- lms/static/js/my_courses_dropdown.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index fe2a9f9ff1..b79db6fc4b 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -55,7 +55,7 @@ $(document).ready(function() { } // if up arrow key pressed or shift+tab else down key or tab is pressed - if (event.which == 38 || (event.which == 9 && event.shiftKey)) { + if (event.which === 38 || (event.which === 9 && event.shiftKey)) { // if first item go to last if (focusedItemIndex === 0) { menuItems.last().focus(); @@ -64,9 +64,9 @@ $(document).ready(function() { menuItems.get(itemToFocusIndex).focus(); } event.preventDefault(); - } else if (event.which == 40 || event.which == 9) { + } else if (event.which === 40 || event.which === 9) { // if last item go to first - if (focusedItemIndex == numberOfMenuItems - 1) { + if (focusedItemIndex === numberOfMenuItems - 1) { menuItems.first().focus(); } else { itemToFocusIndex = focusedItemIndex + 1; From 7b8b1f9df87393d7846c8af8fe9240e3a3a78673 Mon Sep 17 00:00:00 2001 From: Jareer Ahsan Date: Thu, 25 Aug 2016 14:32:36 +0500 Subject: [PATCH 3/5] Added keycodes dict for readability --- lms/static/js/my_courses_dropdown.js | 46 ++++++++++++++++++---------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index b79db6fc4b..f6f6fe85b5 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -1,12 +1,23 @@ $(document).ready(function() { 'use strict'; - // define variables for code legibility + // define variables for code legibility var dropdownMenuToggle = $('.dropdown'); var dropdownMenu = $('.dropdown-menu'); var menuItems = dropdownMenu.find('a'); - // bind menu toggle click for later use + var keyCodes = { + leftArrow: 37, + upArrow: 38, + rightArrow: 39, + downArrow: 40, + tab: 9, + escape: 27, + space: 32 + }; + + + // bind menu toggle click for later use dropdownMenuToggle.toggle(function() { dropdownMenu.addClass('expanded').find('a').first().focus(); dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true'); @@ -15,47 +26,49 @@ $(document).ready(function() { dropdownMenuToggle.removeClass('active').attr('aria-expanded', 'false').focus(); }); - // catch keypresses when focused on dropdownMenuToggle (we only care about spacebar keypresses here) + // 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) { + // 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) + // 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 + // get currently focused item var focusedItem = jQuery(':focus'); - // get the number of focusable items + // get the number of focusable items var numberOfMenuItems = menuItems.length; - // get the index of the currently focused item + // get the index of the currently focused item var focusedItemIndex = menuItems.index(focusedItem); - // var to store next focused item index + // var to store next focused item index var itemToFocusIndex; - // if space key pressed - if (event.which == 32) { + // if space key pressed + if (event.which === keyCodes.space) { dropdownMenuToggle.click(); event.preventDefault(); } - // if escape key pressed - if (event.which == 27) { + // 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 === 38 || (event.which === 9 && event.shiftKey)) { + 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(); @@ -64,7 +77,8 @@ $(document).ready(function() { menuItems.get(itemToFocusIndex).focus(); } event.preventDefault(); - } else if (event.which === 40 || event.which === 9) { + } 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(); From 4b8490d90114c863e3ac69388ef230d315ed6d57 Mon Sep 17 00:00:00 2001 From: Jareer Ahsan Date: Fri, 26 Aug 2016 19:09:54 +0500 Subject: [PATCH 4/5] Changed to global keycodes, refactored for quality --- lms/static/js/my_courses_dropdown.js | 165 +++++++++++++-------------- 1 file changed, 80 insertions(+), 85 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index f6f6fe85b5..aecc564c02 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -1,92 +1,87 @@ -$(document).ready(function() { +(function(require) { 'use strict'; - // define variables for code legibility - var dropdownMenuToggle = $('.dropdown'); - var dropdownMenu = $('.dropdown-menu'); - var menuItems = dropdownMenu.find('a'); + 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('a'); - var keyCodes = { - leftArrow: 37, - upArrow: 38, - rightArrow: 39, - downArrow: 40, - tab: 9, - escape: 27, - space: 32 - }; + // 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(); + }); - - // 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 === 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); - }); - - 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 === keyCodes.space) { - dropdownMenuToggle.click(); - event.preventDefault(); - } - - // 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(); + // 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(); } - 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(); + }); + + 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 === constants.keyCodes.space) { + $dropdownMenuToggle.click(); + event.preventDefault(); + } + + // if escape key pressed + if (event.which === constants.keyCodes.esc) { + $dropdownMenuToggle.click(); + event.preventDefault(); + } + + // 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(); } - 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); From c2c17c11e7942ab7796307475f888b9763765e5f Mon Sep 17 00:00:00 2001 From: Jareer Ahsan Date: Mon, 29 Aug 2016 20:09:48 +0500 Subject: [PATCH 5/5] Added classname to find menu links --- lms/static/js/my_courses_dropdown.js | 4 ++-- lms/templates/user_dropdown.html | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index aecc564c02..8155b1317b 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -8,11 +8,11 @@ // define variables for code legibility var $dropdownMenuToggle = $('.dropdown'); var $dropdownMenu = $('.dropdown-menu'); - var menuItems = $dropdownMenu.find('a'); + var menuItems = $dropdownMenu.find('.dropdown-menuitem'); // bind menu toggle click for later use $dropdownMenuToggle.toggle(function() { - $dropdownMenu.addClass('expanded').find('a').first() + $dropdownMenu.addClass('expanded').find('.dropdown-menuitem').first() .focus(); $dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true'); }, function() { diff --git a/lms/templates/user_dropdown.html b/lms/templates/user_dropdown.html index b46698957a..dfd9f99cb6 100644 --- a/lms/templates/user_dropdown.html +++ b/lms/templates/user_dropdown.html @@ -27,11 +27,11 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_ @@ -53,7 +53,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_