From b93dbda3f2349bbcda5e96ae5d57ab9ea1db2db8 Mon Sep 17 00:00:00 2001 From: Nicholas Heiner Date: Thu, 25 Aug 2016 12:16:19 -0400 Subject: [PATCH] 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. --- .travis.yml | 2 +- package.json | 3 ++ src/modal/docs/readme.md | 2 +- src/modal/modal.js | 54 ++++++++++++++++++++++++++++++++++-- src/modal/test/modal.spec.js | 10 +++++++ 5 files changed, 66 insertions(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index fba6738247..41beb93ade 100644 --- a/.travis.yml +++ b/.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 --git a/package.json b/package.json index 2eb97eb9c0..036015cb33 100644 --- a/package.json +++ b/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 --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md index 83db1aca12..66b6f36803 100644 --- a/src/modal/docs/readme.md +++ b/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 --git a/src/modal/modal.js b/src/modal/modal.js index 1666152630..6dbe909d18 100644 --- a/src/modal/modal.js +++ b/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,6 +557,34 @@ 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) { @@ -562,13 +592,30 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p } $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 --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 98d3d258c9..6627b6fe22 100644 --- a/src/modal/test/modal.spec.js +++ b/src/modal/test/modal.spec.js @@ -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: '

Modal content

' + }); + + expect($document.find('.modal').attr('aria-live')).toEqual('polite'); + }); + }); }); describe('modal window', function() {