From 1993fda3eeb27cd224a368e5bde7c8b33e2c433f Mon Sep 17 00:00:00 2001
From: Sarbbottam Bandyopadhyay <sarbbottam@gmail.com>
Date: Sat, 8 Aug 2015 21:41:38 -0700
Subject: [PATCH] restrict tab navigation within the modal

---
 example/common.js  |  4 +++-
 example/index.html |  6 +++---
 src/modal.js       | 24 ++++++++++++++++++++++++
 test/modal.js      | 39 ++++++++++++++++++++++++++++++++++++---
 4 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/example/common.js b/example/common.js
index fc8c7db..95fe15f 100644
--- a/example/common.js
+++ b/example/common.js
@@ -7,6 +7,7 @@ var modalContainer = document.getElementById('modal');
 var primaryButton = modalContainer.querySelector('.js-button-primary');
 var secondaryButton = modalContainer.querySelector('.js-button-secondary');
 var closeButton = modalContainer.querySelector('.js-button-close');
+var focusableNodeList = Array.prototype.slice.call(modalContainer.querySelectorAll('.js-focusable'));
 
 var showButton = document.getElementById('show-modal');
 
@@ -15,7 +16,8 @@ modal = new Modal({
   modalContainer: modalContainer,
   primaryButton: primaryButton,
   secondaryButton: secondaryButton,
-  closeButton: closeButton
+  closeButton: closeButton,
+  focusableNodeList: focusableNodeList
 });
 
 modal.init();
diff --git a/example/index.html b/example/index.html
index 4f866fd..9b11381 100644
--- a/example/index.html
+++ b/example/index.html
@@ -25,7 +25,7 @@
     </div>
     <div id="modal" class="modal hide" aria-labelledby="modal-heading" aria-describedby="modal-description" role="dialog">
       <div class="modal-content p-a v-a-m">
-        <input id="button-close" class="button modal-close-button js-button-close" type="button" value="X" aria-label="close modal">
+        <input id="button-close" class="button modal-close-button js-button-close js-focusable" type="button" value="X" aria-label="close modal">
         <div id="modal-description" class="clipped">Beginning of dialog window. It begins with a heading 1 called "Modal Heading". Escape will cancel and close the window.</div>
         <div class="modal-header">
           <h1 id="modal-heading" class="text-lg">Modal Heading</h1>
@@ -36,10 +36,10 @@ <h1 id="modal-heading" class="text-lg">Modal Heading</h1>
         </div>
         <div class="row modal-footer">
           <div class="col col-1-2 p-e">
-            <input type="button" class="button button-primary w-100 js-button-primary" value="OK">
+            <input type="button" class="button button-primary w-100 js-button-primary js-focusable" value="OK">
           </div>
           <div class="col col-1-2 p-s">
-            <input type="button" class="button button-secondary w-100 js-button-secondary" value="Cancel">
+            <input type="button" class="button button-secondary w-100 js-button-secondary js-focusable" value="Cancel">
           </div>
         </div>
       </div>
diff --git a/src/modal.js b/src/modal.js
index 5826cba..4cccf2c 100644
--- a/src/modal.js
+++ b/src/modal.js
@@ -14,6 +14,9 @@ function Modal(config) {
   this.primaryFunction = config.primaryFunction;
   this.secondaryFunction = config.secondaryFunction;
 
+  this.focusableNodeList = config.focusableNodeList || null;
+  this.focusableIndex = -1;
+
   css = config.css;
 
   /* istanbul ignore next */
@@ -24,10 +27,31 @@ function Modal(config) {
 }
 
 function keydownHandler(e) {
+  var focusableNodeList = this.focusableNodeList;
+  var focusableIndex = this.focusableIndex;
+
   if (e.keyCode === 27) {
     this.hide();
     document.removeEventListener('keydown', this.keydownHandler);
   }
+
+  if (focusableNodeList && e.keyCode === 9) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.shiftKey) {
+      focusableIndex -= 1;
+      if (focusableIndex < 0) {
+        focusableIndex = focusableNodeList.length - 1;
+      }
+    } else {
+      focusableIndex += 1;
+      if (focusableIndex > focusableNodeList.length - 1) {
+        focusableIndex = 0;
+      }
+    }
+    focusableNodeList[focusableIndex].focus();
+    this.focusableIndex = focusableIndex;
+  }
 }
 
 Modal.prototype.show = function() {
diff --git a/test/modal.js b/test/modal.js
index ed09eda..74e1d6c 100644
--- a/test/modal.js
+++ b/test/modal.js
@@ -5,7 +5,7 @@ describe('Modal', function() {
     <div id="main"></div> \
     <div id="modal" class="modal hide" aria-labelledby="modal-heading" aria-describedby="modal-description" role="dialog"> \
       <div class="modal-content v-a-m"> \
-        <input id="button-close" class="button button-close js-button-close" type="button" value="X" aria-label="close modal"> \
+        <input id="button-close" class="button button-close js-button-close js-focusable" type="button" value="X" aria-label="close modal"> \
         <div id="modal-description"  class="clipped">Beginning of dialog window. It begins with a heading 1 called "Modal Heading". Escape will cancel and close the window.</div> \
         <div class="modal-header"> \
           <h1 id="modal-heading" class="text-lg">Modal Heading</h1> \
@@ -15,10 +15,10 @@ describe('Modal', function() {
         </div> \
         <div class="row modal-footer"> \
           <div class="col col-1-2 p-e"> \
-            <input type="button" class="button button-primary w-100 js-button-primary" value="OK"> \
+            <input type="button" class="button button-primary w-100 js-button-primary js-focusable" value="OK"> \
           </div> \
           <div class="col col-1-2 p-s"> \
-            <input type="button" class="button button-secondary w-100 js-button-secondary" value="Cancel"> \
+            <input type="button" class="button button-secondary w-100 js-button-secondary js-focusable" value="Cancel"> \
           </div> \
         </div> \
       </div> \
@@ -38,6 +38,8 @@ describe('Modal', function() {
   var primaryFunction;
   var secondaryFunction;
 
+  var focusableNodeList;
+
   before(function() {
     wrapper = document.createElement('div');
     wrapper.innerHTML = markup;
@@ -50,6 +52,8 @@ describe('Modal', function() {
     secondaryButton = modalContainer.querySelector('.js-button-secondary');
     closeButton = modalContainer.querySelector('.js-button-close');
 
+    focusableNodeList = Array.prototype.slice.call(modalContainer.querySelectorAll('.js-focusable'));
+
     primaryFunction = function noop() {};
     secondaryFunction = function noop() {};
     modal = new Modal({
@@ -156,4 +160,33 @@ describe('Modal', function() {
 
   });
 
+  describe('tab navigation', function() {
+
+    it('should focus only the nodes withing the modal', function() {
+      modal = new Modal({
+        mainContainer: mainContainer,
+        modalContainer: modalContainer,
+        primaryButton: primaryButton,
+        secondaryButton: secondaryButton,
+        closeButton: closeButton,
+        focusableNodeList: focusableNodeList
+      });
+      modal.init();
+      modal.show();
+      event.triggerKeydownEvent(modalContainer, 9);
+      assert.equal(document.activeElement, closeButton);
+      event.triggerKeydownEvent(modalContainer, 9);
+      assert.equal(document.activeElement, primaryButton);
+      event.triggerKeydownEvent(modalContainer, 9);
+      assert.equal(document.activeElement, secondaryButton);
+      event.triggerKeydownEvent(modalContainer, 9);
+      assert.equal(document.activeElement, closeButton);
+      event.triggerKeydownEvent(modalContainer, 9, true);
+      assert.equal(document.activeElement, secondaryButton);
+      event.triggerKeydownEvent(modalContainer, 9, true);
+      assert.equal(document.activeElement, primaryButton);
+    });
+
+  });
+
 });