From 9dab9d2c208bee9bb44f92ded3417f7219701fbb Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
Date: Mon, 22 Jan 2018 09:38:54 -0500
Subject: [PATCH] a11y issues on upgrade footer.

LEARNER-3055
---
 lms/static/sass/features/_course-sock.scss    | 19 +++++++++----------
 .../static/course_experience/js/CourseSock.js |  6 +++++-
 .../course-sock-fragment.html                 | 10 +++++-----
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/lms/static/sass/features/_course-sock.scss b/lms/static/sass/features/_course-sock.scss
index 49f6d56c30..d1e9b83614 100644
--- a/lms/static/sass/features/_course-sock.scss
+++ b/lms/static/sass/features/_course-sock.scss
@@ -48,6 +48,15 @@
       color: $black-t3;
       position: relative;
 
+      h2 {
+        font-size: 1.5rem;
+        font-weight: $font-weight-bold;
+      }
+
+      h3 {
+        font-size: 1.25rem;
+      }
+
       @media (max-width: 960px) {
         .mini-cert {
           display: none;
@@ -63,16 +72,6 @@
         width: ($baseline * 13);
       }
 
-      h2 {
-        font-size: 1.5rem;
-        font-weight: 700;
-      }
-
-      h4 {
-        font-size: 1.25rem;
-        font-weight: 600;
-      }
-
       .learner-story-container {
         display: flex;
         max-width: 630px;
diff --git a/openedx/features/course_experience/static/course_experience/js/CourseSock.js b/openedx/features/course_experience/static/course_experience/js/CourseSock.js
index 2c3ad8986d..8ae27cced4 100644
--- a/openedx/features/course_experience/static/course_experience/js/CourseSock.js
+++ b/openedx/features/course_experience/static/course_experience/js/CourseSock.js
@@ -52,9 +52,13 @@ export class CourseSock {  // eslint-disable-line import/prefer-default-export
     // Open the sock when user clicks to Learn More
     $toggleActionButton.on('click', () => {
       const toggleSpeed = 400;
-      $toggleActionButton.toggleClass('active').toggleClass('aria-expanded');
+      $toggleActionButton.toggleClass('active');
       $verificationSock.slideToggle(toggleSpeed, fixUpgradeButton);
 
+      // Toggle aria-expanded attribute
+      const newAriaExpandedState = $toggleActionButton.attr('aria-expanded') === 'false';
+      $toggleActionButton.attr('aria-expanded', newAriaExpandedState);
+
       // Log open and close events
       const isOpening = $toggleActionButton.hasClass('active');
       const logMessage = isOpening ? 'edx.bi.course.sock.toggle_opened'
diff --git a/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html b/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
index 26555a01b5..9aaf44bb46 100644
--- a/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
@@ -16,20 +16,20 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
         style="display: none"
         %endif
     >
-        <button type="button" class="btn btn-primary focusable action-toggle-verification-sock">
+        <button type="button" aria-expanded="false" class="btn btn-primary focusable action-toggle-verification-sock">
             ${_('Learn About Verified Certificates')}
         </button>
         <div class="verification-main-panel">
             <div class="verification-desc-panel content-main">
                 <h2>${_('{platform_name} Verified Certificate').format(platform_name=settings.PLATFORM_NAME)}</h2>
-                <h4>${_('Why upgrade?')}</h4>
+                <h3>${_('Why upgrade?')}</h3>
                 <ul>
                     <li>${_('Official proof of completion')}</li>
                     <li>${_('Easily shareable certificate')}</li>
                     <li>${_('Proven motivator to complete the course')}</li>
                     <li>${_('Certificate purchases help {platform_name} continue to offer free courses').format(platform_name=settings.PLATFORM_NAME)}</li>
                 </ul>
-                <h4>${_('How it works')}</h4>
+                <h3>${_('How it works')}</h3>
                 <ul>
                     <li>${_('Pay the Verified Certificate upgrade fee')}</li>
                     <li>${_('Verify your identity with a webcam and government-issued ID')}</li>
@@ -37,7 +37,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
                     <li>${_('Share your certificate with friends, employers, and others')}</li>
                 </ul>
                 % if settings.PLATFORM_NAME == 'edX':
-                    <h4>${_('edX Learner Stories')}</h4>
+                    <h3>${_('edX Learner Stories')}</h3>
                     <div class="learner-story-container">
                         <img class="student-image" alt="Student Image" src="${static.url('course_experience/images/learner-quote.png')}" />
                         <div class="story-quote">
@@ -57,7 +57,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
                         </div>
                     </div>
                 % endif
-                <img class="mini-cert" src="${static.url('course_experience/images/verified-cert.png')}"/>
+                <img class="mini-cert" alt="Example Certificate Image" src="${static.url('course_experience/images/verified-cert.png')}"/>
                 <a href="${upgrade_url}">
                     <button type="button" class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
                         ${Text(_('Upgrade ({course_price})')).format(course_price=HTML(course_price))}