Merge pull request #5854 from edx/alasdair/logistration-accessibility

Updated templates in light of accessibility review

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

@@ -120,6 +120,7 @@
     .form-label {
         @extend %bold-label;
         padding: 0 0 0 5px;
+        letter-spacing: 1px;
     }
 
     .action-label {

lms/templates/student_account/access.underscore

@@ -5,28 +5,28 @@
 
 <% if ( mode === 'login' ) { %>
     <section id="register-anchor" class="form-type">
-        <h2>
+        <span>
             <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
             <label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
-        </h2>
+        </span>
         <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
     </section>
 <% } %>
 
 <section id="login-anchor" class="form-type">
-    <h2>
+    <span>
         <input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>>
         <label for="login-option" class="form-label"><%- gettext("I am a returning user") %></label>
-    </h2>
+    </span>
     <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden" aria-hidden="true<% } %>"></div>
 </section>
 
 <% if ( mode === 'register' ) { %>
     <section id="register-anchor" class="form-type">
-        <h2>
+        <span>
             <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
             <label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
-        </h2>
+        </span>
         <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
     </section>
 <% } %>

lms/templates/student_account/login.underscore

@@ -19,8 +19,9 @@
 
 <% _.each( context.providers, function( provider ) {
     if ( provider.loginUrl ) { %>
-        <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
-            <span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
+        <button type="submit" class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
+            <span class="icon <%- provider.iconClass %>" aria-hidden="true"></span>
+            <%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
         </button>
     <% }
 }); %>

lms/templates/student_account/register.underscore

@@ -8,8 +8,9 @@
 <% } else {
     _.each( context.providers, function( provider) {
         if ( provider.registerUrl ) { %>
-            <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
-                <span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Register using %(name)s"), provider) %>
+            <button type="submit" class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
+                <span class="icon <%- provider.iconClass %>" aria-hidden="true"></span>
+                <%- _.sprintf(gettext("Register using %(name)s"), provider) %>
             </button>
     <%  }
     });