Merge pull request #8699 from open-craft/sso-a11y

Improve screen reader user experience on logistration page

lms/static/js/student_account/views/LoginView.js

@@ -93,7 +93,7 @@ var edx = edx || {};
         },
 
         thirdPartyAuth: function( event ) {
-            var providerUrl = $(event.target).data('provider-url') || '';
+            var providerUrl = $(event.currentTarget).data('provider-url') || '';
 
             if (providerUrl) {
                 window.location.href = providerUrl;

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

@@ -62,7 +62,7 @@ var edx = edx || {};
         },
 
         thirdPartyAuth: function( event ) {
-            var providerUrl = $(event.target).data('provider-url') || '';
+            var providerUrl = $(event.currentTarget).data('provider-url') || '';
 
             if ( providerUrl ) {
                 window.location.href = providerUrl;

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

@@ -385,6 +385,10 @@ $sm-btn-linkedin: #0077b5;
             color: $white;
         }
 
+        span {
+            color: inherit;
+        }
+
         &:hover,
         &:focus {
             background-image: none;

lms/templates/student_account/login.underscore

@@ -35,6 +35,15 @@
         </h2>
     </div>
 
+    <p class="sr">
+        <% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
+            <%- gettext("Sign in here using your email address and password, or use one of the providers listed below.") %>
+        <% } else { %>
+            <%- gettext("Sign in here using your email address and password.") %>
+        <% } %>
+        <%- gettext("If you do not yet have an account, use the button below to register.") %>
+    </p>
+
     <%= context.fields %>
 
     <button type="submit" class="action action-primary action-update js-login login-button"><%- gettext("Sign in") %></button>
@@ -51,7 +60,8 @@
             if ( provider.loginUrl ) { %>
                 <button type="button" class="button button-primary button-<%- provider.id %> login-provider login-<%- provider.id %>" data-provider-url="<%- provider.loginUrl %>">
                     <div class="icon fa <%- provider.iconClass %>" aria-hidden="true"></div>
-                    <%- provider.name %>
+                    <span aria-hidden="true"><%- provider.name %></span>
+                    <span class="sr"><%- _.sprintf( gettext("Sign in with %(providerName)s"), {providerName: provider.name} ) %></span>
                 </button>
             <% }
         }); %>

lms/templates/student_account/register.underscore

@@ -31,7 +31,8 @@
                 if ( provider.registerUrl ) { %>
                     <button type="button" class="button button-primary button-<%- provider.id %> login-provider register-<%- provider.id %>" data-provider-url="<%- provider.registerUrl %>">
                         <span class="icon fa <%- provider.iconClass %>" aria-hidden="true"></span>
-                        <%- provider.name %>
+                        <span aria-hidden="true"><%- provider.name %></span>
+                        <span class="sr"><%- _.sprintf( gettext("Create account using %(providerName)s."), {providerName: provider.name} ) %></span>
                     </button>
             <%  }
             }); %>