Merge pull request #5934 from edx/alasdair/logistration-accessibility-updates

ECOM-369 accessibility updates

common/static/js/utils/edx.utils.validate.js

@@ -51,6 +51,8 @@ var edx = edx || {};
                     response.isValid = required && min && max && email;
 
                     if ( !response.isValid ) {
+                        _fn.validate.removeDefault( $el );
+
                         response.message = _fn.validate.getMessage( $el, {
                             required: required,
                             min: min,
@@ -162,6 +164,11 @@ var edx = edx || {};
                     });
 
                     return txt.join(' ');
+                },
+
+                // Removes the default HTML5 validation pop-up
+                removeDefault: function( $el ) {
+                    $el.setCustomValidity(' ');
                 }
             }
         };

lms/static/js/student_account/views/FormView.js

@@ -28,6 +28,9 @@ var edx = edx || {};
         // String to append to required label fields
         requiredStr: '*',
 
+        // Id of required footnote
+        requiredNote: 'register-footnote',
+
         initialize: function( data ) {
             this.model = data.model;
             this.preRender( data );
@@ -71,7 +74,8 @@ var edx = edx || {};
             var html = [],
                 i,
                 len = data.length,
-                fieldTpl = this.fieldTpl;
+                fieldTpl = this.fieldTpl,
+                requiredNote = '';
 
             this.fields = data;
 
@@ -80,9 +84,12 @@ var edx = edx || {};
                     data[i].errorMessages = this.escapeStrings( data[i].errorMessages );
                 }
 
+                requiredNote = data[i].required ? this.requiredNote : '';
+
                 html.push( _.template( fieldTpl, $.extend( data[i], {
                     form: this.formType,
-                    requiredStr: this.requiredStr
+                    requiredStr: this.requiredStr,
+                    requiredNote: requiredNote
                 }) ) );
             }
 
@@ -116,6 +123,21 @@ var edx = edx || {};
             return obj;
         },
 
+        focusFirstError: function() {
+            var $error = this.$form.find('.error').first(),
+                $field = {},
+                $parent = {};
+
+            if ( $error.is('label') ) {
+                $parent = $error.parent('.form-field');
+                $error = $parent.find('input') || $parent.find('select');
+            } else {
+                $field = $error;
+            }
+
+            $error.focus();
+        },
+
         forgotPassword: function( event ) {
             event.preventDefault();
 
@@ -184,6 +206,9 @@ var edx = edx || {};
             $('html,body').animate({
                 scrollTop: this.$errors.offset().top
             },'slow');
+
+            // Focus on first error field
+            this.focusFirstError();
         },
 
         submitForm: function( event ) {

lms/static/js/student_account/views/RegisterView.js

@@ -18,6 +18,8 @@ var edx = edx || {};
 
         formType: 'register',
 
+        requiredNote: 'register-footnote',
+
         preRender: function( data ) {
             this.providers = data.thirdPartyAuth.providers || [];
             this.currentProvider = data.thirdPartyAuth.currentProvider || '';

lms/templates/student_account/form_field.underscore

@@ -10,8 +10,9 @@
         <select id="<%= form %>-<%= name %>"
             name="<%= name %>"
             class="input-inline"
-            aria-describedby="<%= form %>-<%= name %>-desc"
-            <% if ( required ) { %> required<% } %>>
+            aria-describedby="<%= form %>-<%= name %>-desc <%= requiredNote %>"
+            oninvalid="setCustomValidity(' ')"
+            <% if ( required ) { %> aria-required="true" required<% } %>>
         <% _.each(options, function(el) { %>
             <option value="<%= el.value%>"<% if ( el.default ) { %> data-isdefault="true"<% } %>><%= el.name %></option>
         <% }); %>
@@ -21,7 +22,8 @@
             type="<%= type %>"
             name="<%= name %>"
             class="input-block"
-            aria-describedby="<%= form %>-<%= name %>-desc"
+            aria-describedby="<%= form %>-<%= name %>-desc <%= requiredNote %>"
+            oninvalid="setCustomValidity(' ')"
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
             <% if ( typeof errorMessages !== 'undefined' ) {
@@ -29,16 +31,17 @@
                     data-errormsg-<%= type %>="<%= msg %>"
             <%  });
             } %>
-            <% if ( required ) { %> required<% } %> ></textarea>
+            <% if ( required ) { %> aria-required="true" required<% } %> ></textarea>
     <% } else { %>
         <input id="<%= form %>-<%= name %>"
            type="<%= type %>"
            name="<%= name %>"
            class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>"
-           aria-describedby="<%= form %>-<%= name %>-desc"
+           aria-describedby="<%= form %>-<%= name %>-desc <%= requiredNote %>"
+           oninvalid="setCustomValidity(' ')"
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
-            <% if ( required ) { %> required<% } %>
+            <% if ( required ) { %> aria-required="true" required<% } %>
             <% if ( typeof errorMessages !== 'undefined' ) {
                 _.each(errorMessages, function( msg, type ) {%>
                     data-errormsg-<%= type %>="<%= msg %>"

lms/templates/student_account/login.underscore

@@ -7,7 +7,7 @@
         <% } %>
     </div>
 
-    <div class="status submission-error hidden" aria-hidden="true">
+    <div class="status submission-error hidden" aria-hidden="true" aria-live="polite">
         <h4 class="message-title"><%- gettext("We couldn't log you in.") %></h4>
         <ul class="message-copy"></ul>
     </div>

lms/templates/student_account/password_reset.underscore

@@ -6,7 +6,7 @@
     <div id="password-reset-form" class="form-wrapper">
         <p class="action-label"><%- gettext("Enter the email address you used to create your account. We'll send you a link you can use to reset your password.") %></p>
         <form id="password-reset-form">
-            <div class="status submission-error hidden" aria-hidden="true">
+            <div class="status submission-error hidden" aria-hidden="true" aria-live="polite">
                 <h4 class="message-title"><%- gettext("An error occurred.") %></h4>
                 <ul class="message-copy"></ul>
             </div>

lms/templates/student_account/register.underscore

@@ -17,7 +17,7 @@
 } %>
 
 <form id="register" autocomplete="off">
-    <div class="status submission-error hidden" aria-hidden="true">
+    <div class="status submission-error hidden" aria-hidden="true" aria-live="polite">
         <h4 class="message-title"><%- gettext("We couldn't complete your registration.") %></h4>
         <ul class="message-copy"></ul>
     </div>
@@ -25,6 +25,5 @@
     <%= context.fields %>
 
     <button class="action action-primary action-update js-register register-button"><%- gettext("Register") %></button>
-
-    <p class="note">* <%- gettext("Required fields") %></p>
+    <p id="register-footnote" class="note">* <%- gettext("Required field") %></p>
 </form>