Skip to content

Commit f9f7e02

Browse files
nickheiner-usdswesleycho
nickheiner-usds
authored and
wesleycho
committed
fix(modal): improve ARIA support.
- Add accessibility with multiple modals Closes angular-ui#6203
1 parent a4bea6f commit f9f7e02

File tree

7 files changed

+109
-10
lines changed

7 files changed

+109
-10
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ addons:
1313
before_install:
1414
- export DISPLAY=:99.0
1515
- sh -e /etc/init.d/xvfb start
16-
- npm install --quiet -g grunt-cli karma
16+
- npm install --quiet -g karma
1717

1818
script: grunt
1919
sudo: false

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
],
1616
"main": "index.js",
1717
"scripts": {
18+
"demo": "grunt after-test && static dist -a 0.0.0.0 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'",
1819
"test": "grunt"
1920
},
2021
"repository": {
@@ -26,6 +27,7 @@
2627
"angular-mocks": "1.5.8",
2728
"angular-sanitize": "1.5.8",
2829
"grunt": "^0.4.5",
30+
"grunt-cli": "^1.2.0",
2931
"grunt-contrib-concat": "^1.0.0",
3032
"grunt-contrib-copy": "^1.0.0",
3133
"grunt-contrib-uglify": "^1.0.1",
@@ -44,6 +46,7 @@
4446
"load-grunt-tasks": "^3.3.0",
4547
"lodash": "^4.1.0",
4648
"marked": "^0.3.5",
49+
"node-static": "^0.7.8",
4750
"semver": "^5.0.1",
4851
"shelljs": "^0.6.0"
4952
},

‎src/modal/docs/demo.html‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-controller="ModalDemoCtrl as $ctrl">
1+
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
22
<script type="text/ng-template" id="myModalContent.html">
33
<div class="modal-header">
44
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
@@ -16,11 +16,29 @@ <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
1616
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
1717
</div>
1818
</script>
19+
<script type="text/ng-template" id="stackedModal.html">
20+
<div class="modal-header">
21+
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
22+
</div>
23+
<div class="modal-body" id="modal-body-{{name}}">
24+
Having multiple modals open at once is probably bad UX but it's technically possible.
25+
</div>
26+
</script>
1927

2028
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
2129
<button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
2230
<button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">Small modal</button>
31+
<button type="button"
32+
class="btn btn-default"
33+
ng-click="$ctrl.open('sm', '.modal-parent')">
34+
Modal appended to a custom parent
35+
</button>
2336
<button type="button" class="btn btn-default" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
2437
<button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
38+
<button type="button" class="btn btn-default" ng-click="$ctrl.openMultipleModals()">
39+
Open multiple modals at once
40+
</button>
2541
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
42+
<div class="modal-parent">
43+
</div>
2644
</div>

‎src/modal/docs/demo.js‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log) {
1+
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
22
var $ctrl = this;
33
$ctrl.items = ['item1', 'item2', 'item3'];
44

55
$ctrl.animationsEnabled = true;
66

7-
$ctrl.open = function (size) {
7+
$ctrl.open = function (size, parentSelector) {
8+
var parentElem = parentSelector ?
9+
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
810
var modalInstance = $uibModal.open({
911
animation: $ctrl.animationsEnabled,
1012
ariaLabelledBy: 'modal-title',
@@ -13,6 +15,7 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibMo
1315
controller: 'ModalInstanceCtrl',
1416
controllerAs: '$ctrl',
1517
size: size,
18+
appendTo: parentElem,
1619
resolve: {
1720
items: function () {
1821
return $ctrl.items;
@@ -45,6 +48,30 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibMo
4548
});
4649
};
4750

51+
$ctrl.openMultipleModals = function () {
52+
$uibModal.open({
53+
animation: $ctrl.animationsEnabled,
54+
ariaLabelledBy: 'modal-title-bottom',
55+
ariaDescribedBy: 'modal-body-bottom',
56+
templateUrl: 'stackedModal.html',
57+
size: 'sm',
58+
controller: function($scope) {
59+
$scope.name = 'bottom';
60+
}
61+
});
62+
63+
$uibModal.open({
64+
animation: $ctrl.animationsEnabled,
65+
ariaLabelledBy: 'modal-title-top',
66+
ariaDescribedBy: 'modal-body-top',
67+
templateUrl: 'stackedModal.html',
68+
size: 'sm',
69+
controller: function($scope) {
70+
$scope.name = 'top';
71+
}
72+
});
73+
};
74+
4875
$ctrl.toggleAnimation = function () {
4976
$ctrl.animationsEnabled = !$ctrl.animationsEnabled;
5077
};

‎src/modal/docs/readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
`$uibModal` is a service to create modal windows.
2-
Creating modals is straightforward: create a template, a controller and reference them when using `$uibModal`.
2+
Creating modals is straightforward: create a template and controller, and reference them when using `$uibModal`.
33

44
The `$uibModal` service has only one method: `open(options)`.
55

‎src/modal/modal.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
163163
// {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}.
164164
scope.$isRendered = true;
165165

166-
// Deferred object that will be resolved when this modal is render.
166+
// Deferred object that will be resolved when this modal is rendered.
167167
var modalRenderDeferObj = $q.defer();
168168
// Resolve render promise post-digest
169169
scope.$$postDigest(function() {
@@ -196,7 +196,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
196196

197197
/**
198198
* If something within the freshly-opened modal already has focus (perhaps via a
199-
* directive that causes focus). then no need to try and focus anything.
199+
* directive that causes focus) then there's no need to try to focus anything.
200200
*/
201201
if (!($document[0].activeElement && element[0].contains($document[0].activeElement))) {
202202
var inputWithAutofocus = element[0].querySelector('[autofocus]');
@@ -254,6 +254,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
254254
};
255255
var topModalIndex = 0;
256256
var previousTopOpenedModal = null;
257+
var ARIA_HIDDEN_ATTRIBUTE_NAME = 'data-bootstrap-modal-aria-hidden-count';
257258

258259
//Modal focus behavior
259260
var tabbableSelector = 'a[href], area[href], input:not([disabled]):not([tabindex=\'-1\']), ' +
@@ -555,25 +556,74 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
555556

556557
openedWindows.top().value.modalDomEl = angularDomEl;
557558
openedWindows.top().value.modalOpener = modalOpener;
559+
560+
applyAriaHidden(angularDomEl);
561+
562+
function applyAriaHidden(el) {
563+
if (!el || el[0].tagName === 'BODY') {
564+
return;
565+
}
566+
567+
getSiblings(el).forEach(function(sibling) {
568+
var elemIsAlreadyHidden = sibling.getAttribute('aria-hidden') === 'true',
569+
ariaHiddenCount = parseInt(sibling.getAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME), 10);
570+
571+
if (!ariaHiddenCount) {
572+
ariaHiddenCount = elemIsAlreadyHidden ? 1 : 0;
573+
}
574+
575+
sibling.setAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME, ariaHiddenCount + 1);
576+
sibling.setAttribute('aria-hidden', 'true');
577+
});
578+
579+
return applyAriaHidden(el.parent());
580+
581+
function getSiblings(el) {
582+
var children = el.parent() ? el.parent().children() : [];
583+
584+
return Array.prototype.filter.call(children, function(child) {
585+
return child !== el[0];
586+
});
587+
}
588+
}
558589
};
559590

560591
function broadcastClosing(modalWindow, resultOrReason, closing) {
561592
return !modalWindow.value.modalScope.$broadcast('modal.closing', resultOrReason, closing).defaultPrevented;
562593
}
563594

595+
function unhideBackgroundElements() {
596+
Array.prototype.forEach.call(
597+
document.querySelectorAll('[' + ARIA_HIDDEN_ATTRIBUTE_NAME + ']'),
598+
function(hiddenEl) {
599+
var ariaHiddenCount = parseInt(hiddenEl.getAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME), 10),
600+
newHiddenCount = ariaHiddenCount - 1;
601+
hiddenEl.setAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME, newHiddenCount);
602+
603+
if (!newHiddenCount) {
604+
hiddenEl.removeAttribute(ARIA_HIDDEN_ATTRIBUTE_NAME);
605+
hiddenEl.removeAttribute('aria-hidden');
606+
}
607+
}
608+
);
609+
}
610+
564611
$modalStack.close = function(modalInstance, result) {
565612
var modalWindow = openedWindows.get(modalInstance);
613+
unhideBackgroundElements();
566614
if (modalWindow && broadcastClosing(modalWindow, result, true)) {
567615
modalWindow.value.modalScope.$$uibDestructionScheduled = true;
568616
modalWindow.value.deferred.resolve(result);
569617
removeModalWindow(modalInstance, modalWindow.value.modalOpener);
570618
return true;
571619
}
620+
572621
return !modalWindow;
573622
};
574623

575624
$modalStack.dismiss = function(modalInstance, reason) {
576625
var modalWindow = openedWindows.get(modalInstance);
626+
unhideBackgroundElements();
577627
if (modalWindow && broadcastClosing(modalWindow, reason, false)) {
578628
modalWindow.value.modalScope.$$uibDestructionScheduled = true;
579629
modalWindow.value.deferred.reject(reason);
@@ -596,6 +646,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
596646

597647
$modalStack.modalRendered = function(modalInstance) {
598648
var modalWindow = openedWindows.get(modalInstance);
649+
$modalStack.focusFirstFocusableElement($modalStack.loadFocusElementList(modalWindow));
599650
if (modalWindow) {
600651
modalWindow.value.renderDeferred.resolve();
601652
}

‎src/modal/test/modal.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -526,7 +526,7 @@ describe('$uibModal', function() {
526526

527527
var modal = open({template: '<div>Content<button>inside modal</button></div>'});
528528
$rootScope.$digest();
529-
expect(document.activeElement.tagName).toBe('DIV');
529+
expect(document.activeElement.tagName).toBe('BUTTON');
530530
expect($document).toHaveModalsOpen(1);
531531

532532
triggerKeyDown($document, 27);
@@ -656,7 +656,7 @@ describe('$uibModal', function() {
656656
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() {
657657
function openAndCloseModalWithAutofocusElement() {
658658

659-
var modal = open({template: '<div><input type="text" id="auto-focus-element" autofocus><input type="text" id="pre-focus-element" focus-me></div>'});
659+
var modal = open({template: '<div><input type="text" id="pre-focus-element" focus-me><input type="text" id="auto-focus-element" autofocus></div>'});
660660
$rootScope.$digest();
661661
expect(angular.element('#auto-focus-element')).not.toHaveFocus();
662662
expect(angular.element('#pre-focus-element')).toHaveFocus();
@@ -698,7 +698,7 @@ describe('$uibModal', function() {
698698
$rootScope.$digest();
699699
$animate.flush();
700700

701-
expect(document.activeElement.tagName).toBe('DIV');
701+
expect(document.activeElement.tagName).toBe('INPUT');
702702

703703
close(modal, 'closed ok');
704704

0 commit comments

Comments
 (0)