From bd1c6fa0c8e8804d59978cad5bf0c8e476d8d3ca Mon Sep 17 00:00:00 2001
From: Adeel Khan <muhammad.adeel@arbisoft.com>
Date: Tue, 4 Dec 2018 01:19:57 +0500
Subject: [PATCH] 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
---
 .../header/navbar-authenticated.html          | 27 ++++++++++++-------
 package-lock.json                             |  4 +--
 .../header/navbar-authenticated.html          | 12 ++++++---
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/lms/templates/header/navbar-authenticated.html b/lms/templates/header/navbar-authenticated.html
index 79a7040634..5b2242e8e4 100644
--- a/lms/templates/header/navbar-authenticated.html
+++ b/lms/templates/header/navbar-authenticated.html
@@ -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:
diff --git a/package-lock.json b/package-lock.json
index 1cfbc5a5f0..0cab901273 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
       }
diff --git a/themes/edx.org/lms/templates/header/navbar-authenticated.html b/themes/edx.org/lms/templates/header/navbar-authenticated.html
index 004cb919e3..c4d81f4690 100644
--- a/themes/edx.org/lms/templates/header/navbar-authenticated.html
+++ b/themes/edx.org/lms/templates/header/navbar-authenticated.html
@@ -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>