Skip to content

E
edx-platform
Commit 1e051e5e by AlasdairSwan
Options

Merge pull request #6555 from edx/alasdair/decoupled-verification-a11y 

Alasdair/decoupled verification a11y
parents 0625b84d 10168b69
Showing with 40 additions and 33 deletions
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">
<%- gettext( "Edit Your Name" ) %>
</a>
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment