Adds selection state to elements for screenreader

Dashboard header was missing aria-current and
aria-selected attributes causing no information
exposed to screen reader about selection.This
would enable such info to be passed to screen
reader

LEARNER-6611
This commit is contained in:
Adeel Khan
2018-12-04 01:19:57 +05:00
committed by Jeff Witt
parent 63820116c5
commit bd1c6fa0c8
3 changed files with 27 additions and 16 deletions

View File

@@ -30,33 +30,40 @@ from openedx.core.djangoapps.site_configuration import helpers as configuration_
<div class="main">
% if show_dashboard_tabs:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}"
aria-current="${'page' if reverse('dashboard') == request.path else 'false'}">
${_("Courses")}
</a>
</div>
% if show_program_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}"
aria-current="${'page' if reverse('program_listing_view') == request.path else 'false'}">
${_("Programs")}
</a>
</div>
% endif
% if show_journal_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('openedx.journals.dashboard') in request.path else ''}tab-nav-link" href="${reverse('openedx.journals.dashboard')}">
${_("Journals")}
<a class="${'active ' if reverse('openedx.journals.dashboard') in request.path else ''}tab-nav-link" href="${reverse('openedx.journals.dashboard')}"
aria-current="${'page' if reverse('openedx.journals.dashboard') == request.path else 'false'}">
${_("Journals")}
</a>
</div>
% endif
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}"
aria-current="${'page' if '/u/' in request.path else 'false'}">
${_("Profile")}
</a>
</div>
% endif
% if show_explore_courses:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="tab-nav-link" href="${marketing_link('COURSES')}">${_('Discover New')}</a>
<a class="tab-nav-link" href="${marketing_link('COURSES')}"
aria-current="${'page' if '/courses' in request.path else 'false'}">
${_('Discover New')}
</a>
</div>
% endif
% if show_sysadmin_dashboard:

4
package-lock.json generated
View File

@@ -441,7 +441,7 @@
"aproba": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
"integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo="
"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
},
"are-we-there-yet": {
"version": "1.1.4",
@@ -14485,7 +14485,7 @@
"wide-align": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
"integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=",
"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
"requires": {
"string-width": "1.0.2"
}

View File

@@ -33,26 +33,30 @@ from openedx.core.djangoapps.site_configuration import helpers as configuration_
% endif
% if show_dashboard_tabs:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}"
aria-current="${'page' if reverse('dashboard') == request.path else 'false'}">
${_("Courses")}
</a>
</div>
% if show_program_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}"
aria-current="${'page' if reverse('program_listing_view') == request.path else 'false'}">
${_("Programs")}
</a>
</div>
% endif
% if show_journal_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('openedx.journals.dashboard') in request.path else ''}tab-nav-link" href="${reverse('openedx.journals.dashboard')}">
<a class="${'active ' if reverse('openedx.journals.dashboard') in request.path else ''}tab-nav-link" href="${reverse('openedx.journals.dashboard')}"
aria-current="${'page' if reverse('openedx.journals.dashboard') == request.path else 'false'}">
${_("Journals")}
</a>
</div>
% endif
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}"
aria-current="${'page' if '/u/' in request.path else 'false'}">
${_("Profile")}
</a>
</div>