manage focus to/from/within password reset modal appropriately

lms/templates/forgot_password_modal.html

@@ -32,9 +32,7 @@
     </div>
 
     <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
+      &#10005;
     </a>
   </div>
 </section>
@@ -56,5 +54,27 @@
    $('#login-modal .close-modal').click(function(e) {
     e.preventDefault();
    });
+
+   var onModalClose = function() {
+        $(".forgot-password-modal .close-modal").off("click");
+        $("#lean_overlay").off("click");
+        $("#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;
+          if (keyCode === 9) {
+              e.preventDefault();
+              $(to_element_name).focus();
+          }
+      });
+    };
+    $(".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")
+
   })(this)
 </script>

lms/templates/login.html

@@ -67,6 +67,10 @@
           $('.message.submission-error .message-copy').html(json.value);
         }
       });
+      $("#forgot-password-link").click(function() {
+        $(".forgot-password-modal .close-modal").focus()
+      })
+
     })(this);
 
     function toggleSubmitButton(enable) {
@@ -127,7 +131,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" 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>