focus the desired elemnt on modal dismissal

sarbbottam · Apr 4, 2016 · c008f44 · c008f44
1 parent 515cf77
commit c008f44
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/example/common.js b/example/common.js
@@ -17,7 +17,8 @@ modal = new Modal({
   primaryButton: primaryButton,
   secondaryButton: secondaryButton,
   closeButton: closeButton,
-  focusableNodeList: focusableNodeList
+  focusableNodeList: focusableNodeList,
+  itemToBeFocusedOnModalDismissal: showButton
 });
 
 modal.init();

diff --git a/src/modal.js b/src/modal.js
@@ -17,6 +17,8 @@ function Modal(config) {
   this.focusableNodeList = config.focusableNodeList || null;
   this.focusableIndex = -1;
 
+  this.itemToBeFocusedOnModalDismissal = config.itemToBeFocusedOnModalDismissal;
+
   css = config.css;
 
   /* istanbul ignore next */
@@ -71,6 +73,9 @@ Modal.prototype.hide = function() {
   this.modalContainer.setAttribute('aria-hidden', 'true');
 
   this.mainContainer.setAttribute('aria-hidden', 'false');
+  if (this.itemToBeFocusedOnModalDismissal) {
+    this.itemToBeFocusedOnModalDismissal.focus();
+  }
 };
 
 Modal.prototype.init = function() {

diff --git a/test/modal.js b/test/modal.js
@@ -2,7 +2,9 @@
 
 describe('Modal', function() {
   var markup = '\
-    <div id="main"></div> \
+    <div id="main"> \
+      <button id="to-be-focused" tabindex="-1">To be  focused</button> \
+    </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 js-focusable" type="button" value="X" aria-label="close modal"> \
@@ -30,6 +32,7 @@ describe('Modal', function() {
   /* containers */
   var mainContainer;
   var modalContainer;
+  var itemToBeFocusedOnModalDismissal;
   /* buttons */
   var primaryButton;
   var secondaryButton;
@@ -47,6 +50,7 @@ describe('Modal', function() {
     /* containers */
     mainContainer = document.getElementById('main');
     modalContainer = document.getElementById('modal');
+    itemToBeFocusedOnModalDismissal = document.getElementById('to-be-focused');
     /* buttons */
     primaryButton = modalContainer.querySelector('.js-button-primary');
     secondaryButton = modalContainer.querySelector('.js-button-secondary');
@@ -63,7 +67,8 @@ describe('Modal', function() {
       secondaryButton: secondaryButton,
       closeButton: closeButton,
       primaryFunction: primaryFunction,
-      secondaryFunction: secondaryFunction
+      secondaryFunction: secondaryFunction,
+      itemToBeFocusedOnModalDismissal: itemToBeFocusedOnModalDismissal
     });
 
     modal.init();
@@ -105,6 +110,12 @@ describe('Modal', function() {
       assert.isTrue(modalContainer.classList.contains('hide'));
     });
 
+    it('should focus the itemToBeFocusedOnModalDismissal on modal dismisaal', function() {
+      modal.show();
+      event.triggerKeydownEvent(document.body, 27);
+      assert.equal(document.activeElement, itemToBeFocusedOnModalDismissal);
+    });
+
   });
 
   describe('primary button', function() {