Merge pull request #1065 from edx/adam/password-modal

manage focus to/from/within password reset modal appropriately

lms/templates/forgot_password_modal.html

 <%! from django.utils.translation import ugettext as _ %>
 
 <%! from django.core.urlresolvers import reverse %>
-<section id="forgot-password-modal" class="modal forgot-password-modal" role="dialog" aria-label="${_('Password Reset')}">
+<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
   <div class="inner-wrapper">
     <div id="password-reset">
       <header>
@@ -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,26 @@
    $('#login-modal .close-modal').click(function(e) {
     e.preventDefault();
    });
+
+   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;
+          var TAB_KEY = 9;  // 9 corresponds to the tab key
+          if (keyCode === TAB_KEY) {
+              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>