ECOM-1002 fixed issue of grey background for logistration page. Also fixed focus…

ECOM-1002 fixed issue of grey background for logistration page. Also fixed focus issue when toggling between forms - as raised by @cptvitamin

lms/static/js/student_account/views/AccessView.js

@@ -119,6 +119,9 @@ var edx = edx || {};
 
                 // Listen for 'password-email-sent' event to toggle sub-views
                 this.listenTo( this.subview.passwordHelp, 'password-email-sent', this.passwordEmailSent );
+
+                // Focus on the form
+                $('.password-reset-form').focus();
             },
 
             register: function( data ) {
@@ -180,6 +183,9 @@ var edx = edx || {};
             // Update url without reloading page
             History.pushState( null, document.title, '/account/' + type + '/' + queryStr );
             analytics.page( 'login_and_registration', type );
+
+            // Focus on the form
+            document.getElementById(type).focus();
         },
 
         /**

lms/static/sass/multicourse/_account.scss

@@ -98,7 +98,6 @@
 
   // layout
   .content-wrapper {
-    background: $account-content-wrapper-bg;
     padding-bottom: 0;
   }
 

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

@@ -22,10 +22,6 @@ $sm-btn-google: #dd4b39;
 $sm-btn-facebook: #3b5998;
 $sm-btn-linkedin: #0077b5;
 
-.section-bkg-wrapper {
-    background: $m-gray-l4;
-}
-
 .login-register {
     @include box-sizing(border-box);
     @include outer-container;
@@ -178,10 +174,24 @@ $sm-btn-linkedin: #0077b5;
 
     .login-form {
         margin-bottom: $baseline;
+
+        &:focus {
+            outline: none;
+        }
     }
 
     .password-reset-form {
         padding-bottom: 25px;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .register-form {
+        &:focus {
+            outline: none;
+        }
     }
 
     %bold-label {

lms/templates/student_account/login.underscore

@@ -20,7 +20,7 @@
     <ul class="message-copy"></ul>
 </div>
 
-<form id="login" class="login-form">
+<form id="login" class="login-form" tabindex="-1">
 
     <div class="section-title lines">
         <h2>

lms/templates/student_account/password_reset.underscore

@@ -3,7 +3,7 @@
     <ul class="message-copy"></ul>
 </div>
 
-<form id="password-reset" class="password-reset-form">
+<form id="password-reset" class="password-reset-form" tabindex="-1">
 
     <div class="section-title lines">
         <h2>

lms/templates/student_account/register.underscore

@@ -3,7 +3,7 @@
     <ul class="message-copy"></ul>
 </div>
 
-<form id="register" autocomplete="off">
+<form id="register" class="register-form" autocomplete="off" tabindex="-1">
     <% if (context.currentProvider) { %>
         <div class="status" aria-hidden="false">
             <p class="message-copy">