Fixed Shift-Tab on menu and ARIA roles, groups

ECOM-4945

lms/static/js/my_courses_dropdown.js

@@ -54,7 +54,7 @@ $(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 (focusedItemIndex === 0) {
@@ -64,10 +64,7 @@ $(document).ready(function() {
                 menuItems.get(itemToFocusIndex).focus();
             }
             event.preventDefault();
-        }
-
-    // if down arrow key pressed or tab key
-        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) {
                 menuItems.first().focus();

lms/templates/user_dropdown.html

@@ -20,7 +20,8 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
             <img class="menu-image" src="${profile_image_url}" alt="">
             ${username}
         </a>
-        <button type="button" class="menu-button button-more has-dropdown js-dropdown-button" aria-haspopup="true" aria-expanded="false" aria-controls="${_("Usermenu")}">
+        <div role="group" aria-label="User menu">
+            <button type="button" class="menu-button button-more has-dropdown js-dropdown-button" aria-expanded="false" aria-controls="${_("Usermenu")}">
                   <span class="icon fa fa-caret-down" aria-hidden="true"></span>
                   <span class="sr-only">${_("Usermenu dropdown")}</span>
             </button>
@@ -33,6 +34,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
                 <li class="dropdown-item item has-block-link"><a href="${reverse('logout')}" role="menuitem" class="action">${_("Sign Out")}</a></li>
             </ul>
         </div>
+    </div>
 % else:
     <ol class="user">
         <li class="primary">
@@ -47,11 +49,13 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
             </a>
         </li>
         <li class="primary">
-            <button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
+            <div role="group" aria-label="User menu">
+                <button class="dropdown" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
                 <ul class="dropdown-menu" aria-label="More Options" role="menu">
                     ${navigation_dropdown_menu_links()}
                     <li class="item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
                 </ul>
+            </div>
         </li>
     </ol>
 % endif