fix(modal): Improve ARIA support by adding a live region.

chore(build): Fix package.json so grunt-cli does not need to be globally installed.
chore(demo): Add command to run demo locally.

Author: nickheiner-usds

Diff for: .travis.yml

@@ -13,7 +13,7 @@ addons:
 before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
-  - npm install --quiet -g grunt-cli karma
+  - npm install --quiet -g karma
 
 script: grunt
 sudo: false

Diff for: package.json

@@ -15,6 +15,7 @@
   ],
   "main": "index.js",
   "scripts": {
+    "demo": "grunt after-test && static dist -a 0.0.0.0 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'",
     "test": "grunt"
   },
   "repository": {
@@ -26,6 +27,7 @@
     "angular-mocks": "1.5.8",
     "angular-sanitize": "1.5.8",
     "grunt": "^0.4.5",
+    "grunt-cli": "^1.2.0",
     "grunt-contrib-concat": "^1.0.0",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-uglify": "^1.0.1",
@@ -44,6 +46,7 @@
     "load-grunt-tasks": "^3.3.0",
     "lodash": "^4.1.0",
     "marked": "^0.3.5",
+    "node-static": "^0.7.8",
     "semver": "^5.0.1",
     "shelljs": "^0.6.0"
   },

Diff for: src/modal/docs/readme.md

@@ -1,5 +1,5 @@
 `$uibModal` is a service to create modal windows.
-Creating modals is straightforward: create a template, a controller and reference them when using `$uibModal`.
+Creating modals is straightforward: create a template and controller, and reference them when using `$uibModal`.
 
 The `$uibModal` service has only one method: `open(options)`.
 

Diff for: src/modal/modal.js

@@ -163,7 +163,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
         // {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}.
         scope.$isRendered = true;
 
-        // Deferred object that will be resolved when this modal is render.
+        // Deferred object that will be resolved when this modal is rendered.
         var modalRenderDeferObj = $q.defer();
         // Resolve render promise post-digest
         scope.$$postDigest(function() {
@@ -196,7 +196,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
 
             /**
              * If something within the freshly-opened modal already has focus (perhaps via a
-             * directive that causes focus). then no need to try and focus anything.
+             * directive that causes focus) then there's no need to try to focus anything.
              */
             if (!($document[0].activeElement && element[0].contains($document[0].activeElement))) {
               var inputWithAutofocus = element[0].querySelector('[autofocus]');
@@ -254,6 +254,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
       };
       var topModalIndex = 0;
       var previousTopOpenedModal = null;
+      var ARIA_HIDDEN_ATTRIBUTE_NAME = 'data-bootstrap-modal-aria-hidden-count';
 
       //Modal focus behavior
       var tabbableSelector = 'a[href], area[href], input:not([disabled]):not([tabindex=\'-1\']), ' +
@@ -529,6 +530,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
           'role': 'dialog',
           'aria-labelledby': modal.ariaLabelledBy,
           'aria-describedby': modal.ariaDescribedBy,
+          'aria-live': 'polite',
           'size': modal.size,
           'index': topModalIndex,
           'animate': 'animate',
@@ -555,20 +557,65 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
 
         openedWindows.top().value.modalDomEl = angularDomEl;
         openedWindows.top().value.modalOpener = modalOpener;
+
+        applyAriaHidden(angularDomEl[0]);
+
+        function applyAriaHidden(el) {
+          if (!el || el.tagName === 'BODY') {
+            return;
+          }
+
+          getSiblings(el).forEach(function(sibling) {
+            var elemIsAlreadyHidden = sibling.getAttribute('aria-hidden') === 'true',
+              ariaHiddenCount = 
+                parseInt(sibling.getAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME), 10) || 
+                  elemIsAlreadyHidden ? 1 : 0;
+
+            sibling.setAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME, ariaHiddenCount + 1);
+            sibling.setAttribute('aria-hidden', 'true');
+          });
+
+          return applyAriaHidden(el.parentElement);
+
+          function getSiblings(el) {
+            var children = el.parentElement ? el.parentElement.children : [];
+
+            return Array.prototype.filter.call(children, function(child) {
+              return child !== el;
+            });
+          }
+        }
       };
 
       function broadcastClosing(modalWindow, resultOrReason, closing) {
         return !modalWindow.value.modalScope.$broadcast('modal.closing', resultOrReason, closing).defaultPrevented;
       }
 
       $modalStack.close = function(modalInstance, result) {
-        var modalWindow = openedWindows.get(modalInstance);
+        var modalWindow;
+        
+        Array.prototype.forEach.call(
+          document.querySelectorAll('[' + ARIA_HIDDEN_ATTRIBUTE_NAME + ']'),
+          function(hiddenEl) {
+            var ariaHiddenCount = parseInt(hiddenEl.getAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME), 10),
+              newHiddenCount = ariaHiddenCount - 1;
+            hiddenEl.setAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME, newHiddenCount);
+
+            if (!newHiddenCount) {
+              hiddenEl.removeAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME);
+              hiddenEl.removeAttribute('aria-hidden');
+            }
+          }
+        );
+
+        modalWindow = openedWindows.get(modalInstance);
         if (modalWindow && broadcastClosing(modalWindow, result, true)) {
           modalWindow.value.modalScope.$$uibDestructionScheduled = true;
           modalWindow.value.deferred.resolve(result);
           removeModalWindow(modalInstance, modalWindow.value.modalOpener);
           return true;
         }
+
         return !modalWindow;
       };
 
@@ -596,6 +643,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
 
       $modalStack.modalRendered = function(modalInstance) {
         var modalWindow = openedWindows.get(modalInstance);
+        $modalStack.focusFirstFocusableElement($modalStack.loadFocusElementList(modalWindow));
         if (modalWindow) {
           modalWindow.value.renderDeferred.resolve();
         }

Diff for: src/modal/test/modal.spec.js

@@ -526,7 +526,7 @@ describe('$uibModal', function() {
 
       var modal = open({template: '<div>Content<button>inside modal</button></div>'});
       $rootScope.$digest();
-      expect(document.activeElement.tagName).toBe('DIV');
+      expect(document.activeElement.tagName).toBe('BUTTON');
       expect($document).toHaveModalsOpen(1);
 
       triggerKeyDown($document, 27);
@@ -656,7 +656,7 @@ describe('$uibModal', function() {
     it('should not focus on the element that has autofocus attribute when the modal is opened and something in the modal already has focus and the animations have finished', function() {
       function openAndCloseModalWithAutofocusElement() {
 
-        var modal = open({template: '<div><input type="text" id="auto-focus-element" autofocus><input type="text" id="pre-focus-element" focus-me></div>'});
+        var modal = open({template: '<div><input type="text" id="pre-focus-element" focus-me><input type="text" id="auto-focus-element" autofocus></div>'});
         $rootScope.$digest();
         expect(angular.element('#auto-focus-element')).not.toHaveFocus();
         expect(angular.element('#pre-focus-element')).toHaveFocus();
@@ -698,7 +698,7 @@ describe('$uibModal', function() {
         $rootScope.$digest();
         $animate.flush();
 
-        expect(document.activeElement.tagName).toBe('DIV');
+        expect(document.activeElement.tagName).toBe('INPUT');
 
         close(modal, 'closed ok');
 
@@ -1586,6 +1586,16 @@ describe('$uibModal', function() {
         expect($document.find('.modal').attr('aria-describedby')).toEqual('modal-description');
       });
     });
+
+    describe('ariaLive', function() {
+      it('should add the aria-live property to the modal', function() {
+        open({
+          template: '<p>Modal content</p>'
+        });
+
+        expect($document.find('.modal').attr('aria-live')).toEqual('polite');
+      });
+    });
   });
 
   describe('modal window', function() {