Enable tab access of modals

Author: c-w

src/index.html

@@ -69,7 +69,7 @@ <h1 class="extra-large no-style">LOKOLE: EMAIL FOR ALL</h1>
           <img src="static/nzola.jpg" class="img-thumbnail img-responsive" id="about-img" alt="Photo of Nzola" />
           <div class="medium" id="modals">
 
-            <div class="thumbnail" rel="modal" id="info1" data-toggle="tooltip" title="more history" data-reference="modal-1-content" data-title="The foundations that led to Ascoderu">
+            <div class="thumbnail" rel="modal" id="info1" data-toggle="tooltip" title="more history" data-reference="modal-1-content" data-title="The foundations that led to Ascoderu" tabindex="0">
               <p>Hi, I’m Nzola Swasisa but please call me Nzola. I was born
                 and raised in the DRC and in 2010 I founded Ascoderu: our
                 canadian-congolese NGO. <em>Click to read more.</em></p>
@@ -91,7 +91,7 @@ <h1 class="extra-large no-style">LOKOLE: EMAIL FOR ALL</h1>
               </div>
             </div>
 
-            <div class="thumbnail" rel="modal" id="info2" data-toggle="tooltip" title="more history" data-reference="modal-2-content" data-title="The history of Ascoderu and Lokole">
+            <div class="thumbnail" rel="modal" id="info2" data-toggle="tooltip" title="more history" data-reference="modal-2-content" data-title="The history of Ascoderu and Lokole" tabindex="0">
               <p>Between 2013-15 I went to Kinshasa in order to test
                 REC (Remote Email Center) and the proof-of-concept led to Lokole. <em>Click to read more.</em></p>
 

src/script.js

@@ -33,15 +33,24 @@
   }
 
   function setupModals() {
-    $('div[rel="modal"]').click(function() {
+    $('div[rel="modal"]').on('click keydown', function(event) {
+      if (event.which !== 1 && event.which !== 13) {
+        return;
+      }
+
       var $clicked = $(this);
       var clickedModalId = $clicked.data('reference');
       var contentModalHtml = $('#' + clickedModalId).html();
 
-      BootstrapDialog.show({
+      var dialog = BootstrapDialog.show({
+        onhidden: function() {
+          $clicked.focus();
+        },
         title: $clicked.data('title'),
         message: $('<div/>').append(contentModalHtml)
       });
+
+      dialog.$modal.focus();
     });
   }