focus management and js syntax fix

lms/templates/forgot_password_modal.html

@@ -2,7 +2,7 @@
 <%! from microsite_configuration import microsite %>
 
 <%! from django.core.urlresolvers import reverse %>
-<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
+<section id="forgot-password-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Password Reset')}">
   <div class="inner-wrapper">
     <button class="close-modal">&#10005;
       <span class="sr">
@@ -43,26 +43,27 @@
 
 <script type="text/javascript">
   (function() {
-   $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
-     if(json.success) {
-       $("#password-reset").html(json.value);
-     } else {
-       if($('#pwd_error').length == 0) {
-         $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
-       }
-       $('#pwd_error').stop().css("display", "block");
-     }
-   });
+    $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
+      if(json.success) {
+        $("#password-reset").html(json.value);
+      } else {
+        if($('#pwd_error').length == 0) {
+          $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
+        }
+        $('#pwd_error').stop().css("display", "block");
+      }
+    });
 
-   // removing close link's default behavior
-   $('#login-modal .close-modal').click(function(e) {
-    e.preventDefault();
-   });
+    // removing close link's default behavior
+    $('#login-modal .close-modal').click(function(e) {
+     e.preventDefault();
+    });
 
-   var onModalClose = function() {
-        $("#forgot-password-modal").attr("aria-hidden", "true");
-        $("#forgot-password-link").focus();
+    var onModalClose = function() {
+      $("#forgot-password-modal").attr("aria-hidden", "true");
+      $("#forgot-password-link").focus();
     };
+    
     var cycle_modal_tab = function(from_element_name, to_element_name) {
       $(from_element_name).on('keydown', function(e) {
           var keyCode = e.keyCode || e.which;
@@ -74,10 +75,9 @@
       });
     };
     $("#forgot-password-modal .close-modal").click(onModalClose);
-    $("#forgot-password-modal").focus()
-    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email")
-    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button")
-    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal")
+    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email");
+    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button");
+    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal");
 
     // Hitting the ESC key will exit the modal
     $("#forgot-password-modal").on("keydown", function(e) {

lms/templates/login.html

@@ -24,8 +24,8 @@
       // new window/tab opening
       $('a[rel="external"], a[class="new-vp"]')
       .click( function() {
-      window.open( $(this).attr('href') );
-      return false;
+        window.open( $(this).attr('href') );
+        return false;
       });
 
       // form field label styling on focus
@@ -71,8 +71,9 @@
         }
       });
       $("#forgot-password-link").click(function() {
-        $("#forgot-password-modal .close-modal").focus()
-      })
+        $("#forgot-password-modal").show();
+        $("#forgot-password-modal .close-modal").focus();
+      });
 
     })(this);
 
@@ -137,7 +138,7 @@
             <label for="password">${_('Password')}</label>
             <input id="password" type="password" name="password" value="" required aria-required="true" />
             <span class="tip tip-input">
-              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" tabindex="-1" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
+              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
             </span>
           </li>
         </ol>