Merge pull request #151 from TriCollegeLibraries/modal-keyboard

Keyboard accessibility for the Bootstrap Lightbox: close on escape and auto focus forms. Excellent work, Anna.

themes/bootstrap/js/lightbox.js

@@ -388,6 +388,10 @@ var Lightbox = {
  * We do it here so that non-JS users still have a good time.
  */
 $(document).ready(function() {
+  // save the currently-focused element
+  $('#modal').on('show', function(e) {
+    Lightbox.focusFrom = document.activeElement;
+  });
   // Add handlers to the forms
   Lightbox.addOpenAction(Lightbox.registerForms);
   /**
@@ -396,6 +400,10 @@ $(document).ready(function() {
    * Yes, the secret's out, our beloved Lightbox is a modal
    */
   $('#modal').on('hidden', Lightbox.closeActions);
+  // refocus the previously-focused element
+  $('#modal').on('hidden', function(e) {
+    Lightbox.focusFrom.focus();
+  });
   /**
    * If a link with the class .modal-link triggers the lightbox,
    * look for a title="" to use as our lightbox title.
@@ -407,4 +415,4 @@ $(document).ready(function() {
     }
     $('#modal .modal-header h3').html(title);
   });
-});
\ No newline at end of file
+});

themes/bootstrap/templates/layout/layout.phtml

@@ -121,7 +121,7 @@
       </div>
     </div>
     <!-- MODAL IN CASE WE NEED ONE -->
-    <div id="modal" class="modal hide fade">
+    <div id="modal" class="modal hide fade" tabindex="-1">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3></h3>