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
openedx · Dec 12, 2018 · 79370bf · 79370bf
1 parent 14009d3
commit 79370bf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/lms/templates/header/navbar-authenticated.html b/lms/templates/header/navbar-authenticated.html
@@ -30,33 +30,40 @@
   <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:

diff --git a/package-lock.json b/package-lock.json
diff --git a/themes/edx.org/lms/templates/header/navbar-authenticated.html b/themes/edx.org/lms/templates/header/navbar-authenticated.html
@@ -33,26 +33,30 @@
       % 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>