Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Shift-Tab on menu and ARIA roles, groups

Browse Source 
ECOM-4945
This commit is contained in:
Jareer Ahsan
2016-08-24 17:20:22 +05:00
parent 008b708617
commit 793622b44c
2 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lms/static/js/my_courses_dropdown.js
View File

@@ -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 {

38
lms/templates/user_dropdown.html
View File

@@ -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