ECOM-873 accessability updates for decoupled verification

lms/static/js/verify_student/views/review_photos_step_view.js

@@ -83,14 +83,15 @@ var edx = edx || {};
         },
 
         expandCallback: function( event ) {
-            var title;
+            var $link = $(this),
+                $title = $link.closest('.help-tip'),
+                expanded = $title.hasClass('is-expanded');
 
             event.preventDefault();
 
-            $(this).next('.expandable-area' ).slideToggle();
-            title = $( this ).parent();
-            title.toggleClass( 'is-expanded' );
-            title.attr( 'aria-expanded', !title.attr( 'aria-expanded' ) );
+            $link.attr( 'aria-expanded', !expanded );
+            $title.toggleClass('is-expanded')
+                  .find('.expandable-area').slideToggle();
         },
 
         setSubmitButtonEnabled: function( isEnabled ) {

lms/static/sass/views/_login-register.scss

@@ -118,7 +118,7 @@ $sm-btn-linkedin: #0077b5;
                 position: relative;
                 background: white;
                 padding: 0 10px;
-                z-index: 10;
+                z-index: 6;
                 text-transform: none;
                 font-size: 0.7em;
                 font-weight: 600;

lms/templates/verify_student/error.underscore

 <div id="error" class="wrapper-msg wrapper-msg-activate">
   <div class=" msg msg-activate">
-    <i class="msg-icon icon fa fa-exclamation-triangle"></i>
+    <i class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></i>
     <div class="msg-content">
-      <h3 class="title"><%- errorTitle %></h3>
+      <h3 class="title">
+        <span class="sr"><%- gettext( "Error:" ) %></span>
+        <%- errorTitle %>
+      </h3>
       <div class="copy">
         <p><%= errorMsg %></p>
       </div>

lms/templates/verify_student/face_photo_step.underscore

@@ -17,7 +17,7 @@
               <li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li>
               <li class="help-item"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
               <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '<span class="example">(<i class="icon fa fa-camera"></i>)</span>' } ) %>
+                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>' } ) %>
               </li>
               <li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></li>
               <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>

lms/templates/verify_student/id_photo_step.underscore

@@ -19,7 +19,7 @@
               <li class="help-item"><%- gettext( "Ensure that you can see your photo and read your name" ) %></li>
               <li class="help-item"><%- gettext( "Make sure your ID is well-lit" ) %></li>
               <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your ID" ), { icon: '<span class="example">(<i class="icon fa fa-camera"></i>)</span>' } ) %>
+                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your ID" ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>' } ) %>
               </li>
               <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
             </ul>

lms/templates/verify_student/intro_step.underscore

@@ -26,7 +26,7 @@
           <li class="req req-0 req-activate">
             <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon fa fa-envelope-o"></i>
+              <i class="icon fa fa-envelope-o" aria-hidden="true"></i>
             </div>
 
             <div class="copy">
@@ -40,8 +40,8 @@
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
             <div class="placeholder-art fa-lg">
-              <i class="icon fa fa-list-alt fa-stack-2x"></i>
-              <i class="icon fa fa-user id-photo fa-stack-1x"></i>
+              <i class="icon fa fa-list-alt fa-stack-2x" aria-hidden="true"></i>
+              <i class="icon fa fa-user id-photo fa-stack-1x" aria-hidden="true"></i>
             </div>
 
             <div class="copy">
@@ -56,7 +56,7 @@
           <li class="req req-2 req-webcam">
             <h4 class="title"><%- gettext( "Webcam" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon fa fa-video-camera"></i>
+              <i class="icon fa fa-video-camera" aria-hidden="true"></i>
             </div>
 
             <div class="copy"></div>

lms/templates/verify_student/make_payment_step.underscore

@@ -121,7 +121,7 @@
           <li class="req req-0 req-activate">
             <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon fa fa-envelope-o"></i>
+              <i class="icon fa fa-envelope-o" aria-hidden="true"></i>
             </div>
 
             <div class="copy">
@@ -135,8 +135,8 @@
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h4>
             <div class="placeholder-art fa-lg">
-              <i class="icon fa fa-list-alt fa-stack-2x"></i>
-              <i class="icon fa fa-user id-photo fa-stack-1x"></i>
+              <i class="icon fa fa-list-alt fa-stack-2x" aria-hidden="true"></i>
+              <i class="icon fa fa-user id-photo fa-stack-1x" aria-hidden="true"></i>
             </div>
 
             <div class="copy"></div>
@@ -147,7 +147,7 @@
           <li class="req req-2 req-webcam">
             <h4 class="title"><%- gettext( "Webcam" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon fa fa-video-camera"></i>
+              <i class="icon fa fa-video-camera" aria-hidden="true"></i>
             </div>
 
             <div class="copy"></div>

lms/templates/verify_student/payment_confirmation_step.underscore

@@ -86,7 +86,7 @@
           <li class="req req-0 req-activate">
             <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon fa fa-envelope-o"></i>
+              <i class="icon fa fa-envelope-o" aria-hidden="true"></i>
             </div>
 
             <div class="copy">
@@ -104,8 +104,8 @@
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
             <div class="placeholder-art fa-lg">
-              <i class="icon fa fa-list-alt fa-stack-2x"></i>
-              <i class="icon fa fa-user id-photo fa-stack-1x"></i>
+              <i class="icon fa fa-list-alt fa-stack-2x" aria-hidden="true"></i>
+              <i class="icon fa fa-user id-photo fa-stack-1x" aria-hidden="true"></i>
             </div>
 
             <div class="copy">
@@ -120,7 +120,7 @@
           <li class="req req-2 req-webcam">
             <h4 class="title"><%- gettext( "Webcam" ) %></h4>
             <div class="placeholder-art">
-              <i class="icon fa fa-video-camera"></i>
+              <i class="icon fa fa-video-camera" aria-hidden="true"></i>
             </div>
 
             <div class="copy"></div>
@@ -131,6 +131,11 @@
     </div>
 
     <nav class="nav-wizard is-ready">
+
+      <a id="verify_later_button" class="next action-secondary verify-later nav-link" href="/dashboard" data-tooltip="<%- _.sprintf( gettext( "If you don't verify your identity now, you can still explore your course from your dashboard. You will receive periodic reminders from %(platformName)s to verify your identity." ), { platformName: platformName } ) %>">
+        <%- gettext( "Want to confirm your identity later?" ) %>
+      </a>
+
       <a id="verify_now_button"
          class="next action-primary right"
          href="<%- _.sprintf( '/verify_student/verify-now/%(courseKey)s', { courseKey: courseKey } ) %>"
@@ -140,10 +145,6 @@
           { nextStepTitle: nextStepTitle }
         ) %>
       </a>
-
-      <a id="verify_later_button" class="next action-secondary verify-later nav-link" href="/dashboard" data-tooltip="<%- _.sprintf( gettext( "If you don't verify your identity now, you can still explore your course from your dashboard. You will receive periodic reminders from %(platformName)s to verify your identity." ), { platformName: platformName } ) %>">
-        <%- gettext( "Want to confirm your identity later?" ) %>
-      </a>
     </nav>
     <% } %>
   </article>

lms/templates/verify_student/review_photos_step.underscore

@@ -10,12 +10,12 @@
         <div class="wrapper-photos">
           <div class="wrapper-photo">
             <div class="placeholder-photo">
-              <img id="face_image" src=""/>
+              <img id="face_image" src="" alt="<%- _.sprintf(  gettext( "Photo of %(fullName)s" ), { fullName: fullName } ) %>"/>
             </div>
           </div>
           <div class="wrapper-photo">
             <div class="placeholder-photo">
-              <img id="photo_id_image" src=""/>
+              <img id="photo_id_image" src="" alt="<%- _.sprintf( gettext( "Photo of %(fullName)s's ID" ), { fullName: fullName } ) %>"/>
             </div>
           </div>
         </div>
@@ -29,9 +29,11 @@
               <li class="tip"><%- gettext( "Is your name on your ID readable?" ) %></li>
               <li class="tip"><%- _.sprintf(  gettext( "Does the name on your ID match your account name: %(fullName)s?" ), { fullName: fullName } ) %>
                 <div class="help-tip is-expandable">
-                  <a href="#" class="title title-expand" aria-expanded="false" role="link">
+                  <label for="new-name">
+                    <a href="#" class="title title-expand" aria-expanded="false">
                       <%- gettext( "Edit Your Name" ) %>
                     </a>
+                  </label>
 
                   <div class="copy expandable-area">
                     <p><%- gettext( "Make sure that the full name on your account matches the name on your ID." ) %></p>

lms/templates/verify_student/webcam_photo.underscore

@@ -3,7 +3,7 @@
     <p class="copy"><%- gettext( "Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission." ) %></p>
   </div>
 
-  <video id="photo_id_video" autoplay></video><br/>
+  <video id="photo_id_video" aria-label="<%- gettext( 'Live view of webcam' ) %>" autoplay></video><br/>
   <canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
 </div>
 
@@ -13,7 +13,7 @@
   </div>
   <div class="control control-do is-hidden" id="webcam_capture_button">
     <a class="action action-do">
-      <i class="icon fa fa-camera"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
+      <i class="icon fa fa-camera" aria-hidden="true"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
     </a>
   </div>
 </div>