fix(modal): ensure shift+tab is trapped in modal

- Fixes where shift+tab keystrokes are not causing focus to remain trapped in modal Closes #5294 Fixes #5229
angular-ui · Jan 28, 2016 · d2621e3 · d2621e3
1 parent b1ad080
commit d2621e3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/modal/modal.js b/src/modal/modal.js
@@ -404,7 +404,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
               $modalStack.loadFocusElementList(modal);
               var focusChanged = false;
               if (evt.shiftKey) {
-                if ($modalStack.isFocusInFirstItem(evt)) {
+                if ($modalStack.isFocusInFirstItem(evt) || $modalStack.isModalFocused(evt, modal)) {
                   focusChanged = $modalStack.focusLastFocusableElement();
                 }
               } else {
@@ -547,6 +547,16 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
         return false;
       };
 
+      $modalStack.isModalFocused = function(evt, modalWindow) {
+        if (evt && modalWindow) {
+          var modalDomEl = modalWindow.value.modalDomEl;
+          if (modalDomEl && modalDomEl.length) {
+            return (evt.target || evt.srcElement) === modalDomEl[0];
+          }
+        }
+        return false;
+      };
+
       $modalStack.isFocusInFirstItem = function(evt) {
         if (focusableElementList.length > 0) {
           return (evt.target || evt.srcElement) === focusableElementList[0];

diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js
@@ -620,11 +620,15 @@ describe('$uibModal', function() {
         template:'<a href="#" id="tab-focus-link"><input type="text" id="tab-focus-input1"/><input type="text" id="tab-focus-input2"/>' +
         '<button id="tab-focus-button">Open me!</button>'
       });
+      $rootScope.$digest();
       expect($document).toHaveModalsOpen(1);
 
+      triggerKeyDown(angular.element(document.activeElement), 9, true);
+      expect(document.activeElement.getAttribute('id')).toBe('tab-focus-button');
+
       var lastElement = angular.element(document.getElementById('tab-focus-link'));
       lastElement.focus();
-      triggerKeyDown(lastElement, 9, true);
+      triggerKeyDown(angular.element(document.activeElement), 9, true);
       expect(document.activeElement.getAttribute('id')).toBe('tab-focus-button');
 
       initialPage.remove();
@@ -660,11 +664,15 @@ describe('$uibModal', function() {
         '<button id="tab-focus-button">Open me!</button>',
         keyboard: false
       });
+      $rootScope.$digest();
       expect($document).toHaveModalsOpen(1);
 
+      triggerKeyDown(angular.element(document.activeElement), 9, true);
+      expect(document.activeElement.getAttribute('id')).toBe('tab-focus-button');
+
       var lastElement = angular.element(document.getElementById('tab-focus-link'));
       lastElement.focus();
-      triggerKeyDown(lastElement, 9, true);
+      triggerKeyDown(angular.element(document.activeElement), 9, true);
       expect(document.activeElement.getAttribute('id')).toBe('tab-focus-button');
 
       initialPage.remove();