Fixed Shift-Tab on menu and ARIA roles, groups

ECOM-4945

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 {

lms/templates/user_dropdown.html

@@ -20,18 +20,20 @@ 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")}">
-              <span class="icon fa fa-caret-down" aria-hidden="true"></span>
-              <span class="sr-only">${_("Usermenu dropdown")}</span>
-        </button>
-        <ul class="dropdown-menu list-divided is-hidden" id="${_("Usermenu")}" tabindex="-1">
-            <%block name="navigation_dropdown_menu_links" >
-                <li class="dropdown-item item has-block-link"><a href="${reverse('dashboard')}" class="action">${_("Dashboard")}</a></li>
-                <li class="dropdown-item item has-block-link"><a href="${reverse('learner_profile', kwargs={'username': user.username})}" class="action">${_("Profile")}</a></li>
-                <li class="dropdown-item item has-block-link"><a href="${reverse('account_settings')}" class="action">${_("Account")}</a></li>
-            </%block>
-            <li class="dropdown-item item has-block-link"><a href="${reverse('logout')}" role="menuitem" class="action">${_("Sign Out")}</a></li>
-        </ul>
+        <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>
+            <ul class="dropdown-menu list-divided is-hidden" id="${_("Usermenu")}" tabindex="-1">
+                <%block name="navigation_dropdown_menu_links" >
+                    <li class="dropdown-item item has-block-link"><a href="${reverse('dashboard')}" class="action">${_("Dashboard")}</a></li>
+                    <li class="dropdown-item item has-block-link"><a href="${reverse('learner_profile', kwargs={'username': user.username})}" class="action">${_("Profile")}</a></li>
+                    <li class="dropdown-item item has-block-link"><a href="${reverse('account_settings')}" class="action">${_("Account")}</a></li>
+                </%block>
+                <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">
@@ -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>
-            <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 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