From 4a5e6a741818c4884274c7c072b04c35c367a8a7 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nth23@cornell.edu>
Date: Tue, 16 Aug 2016 14:40:50 -0400
Subject: [PATCH] fix(modal): improve ARIA support

- Add aria-labelledby and aria-described by support

Closes #4772
---
 src/modal/docs/demo.html     |  6 +++---
 src/modal/docs/demo.js       |  2 ++
 src/modal/docs/readme.md     |  8 ++++++++
 src/modal/modal.js           |  4 ++++
 src/modal/test/modal.spec.js | 22 ++++++++++++++++++++++
 5 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/modal/docs/demo.html b/src/modal/docs/demo.html
index ac96e0780b..c71901cb0f 100644
--- a/src/modal/docs/demo.html
+++ b/src/modal/docs/demo.html
@@ -1,9 +1,9 @@
 <div ng-controller="ModalDemoCtrl">
     <script type="text/ng-template" id="myModalContent.html">
         <div class="modal-header">
-            <h3 class="modal-title">I'm a modal!</h3>
+            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
         </div>
-        <div class="modal-body">
+        <div class="modal-body" id="modal-body">
             <ul>
                 <li ng-repeat="item in items">
                     <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
@@ -22,4 +22,4 @@ <h3 class="modal-title">I'm a modal!</h3>
     <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
     <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
     <div ng-show="selected">Selection from a modal: {{ selected }}</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/modal/docs/demo.js b/src/modal/docs/demo.js
index 1055775653..68b58c5a1a 100644
--- a/src/modal/docs/demo.js
+++ b/src/modal/docs/demo.js
@@ -8,6 +8,8 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope
 
     var modalInstance = $uibModal.open({
       animation: $scope.animationsEnabled,
+      ariaLabelledBy: 'modal-title',
+      ariaDescribedBy: 'modal-body',
       templateUrl: 'myModalContent.html',
       controller: 'ModalInstanceCtrl',
       size: size,
diff --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md
index 50f3fc9105..aa04e81a61 100644
--- a/src/modal/docs/readme.md
+++ b/src/modal/docs/readme.md
@@ -14,6 +14,14 @@ The `$uibModal` service has only one method: `open(options)`.
 * `appendTo` 
   _(Type: `angular.element`, Default: `body`: Example: `$document.find('aside').eq(0)`)_ -
   Appends the modal to a specific element.
+
+* `ariaDescribedBy` 
+  _(Type: `string`, `my-modal-description`)_ -
+  Sets the [`aria-describedby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) property on the modal. The value should be an id (without the leading `#`) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. Omitting this option will not impact sighted users but will weaken your accessibility support.
+
+* `ariaLabelledBy` 
+  _(Type: `string`, `my-modal-title`)_ -
+  Sets the [`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) property on the modal. The value should be an id (without the leading `#`) pointing to the element that labels your modal. Typically, this will be a header element. Omitting this option will not impact sighted users but will weaken your accessibility support.
   
 * `backdrop`
   _(Type: `boolean|string`, Default: `true`)_ -
diff --git a/src/modal/modal.js b/src/modal/modal.js
index a4668aed22..eb68c19e11 100644
--- a/src/modal/modal.js
+++ b/src/modal/modal.js
@@ -504,6 +504,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
           'template-url': modal.windowTemplateUrl,
           'window-top-class': modal.windowTopClass,
           'role': 'dialog',
+          'aria-labelledby': modal.ariaLabelledBy,
+          'aria-describedby': modal.ariaDescribedBy,
           'size': modal.size,
           'index': topModalIndex,
           'animate': 'animate',
@@ -755,6 +757,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap', 'ui.bootstrap.p
                   windowTopClass: modalOptions.windowTopClass,
                   windowClass: modalOptions.windowClass,
                   windowTemplateUrl: modalOptions.windowTemplateUrl,
+                  ariaLabelledBy: modalOptions.ariaLabelledBy,
+                  ariaDescribedBy: modalOptions.ariaDescribedBy,
                   size: modalOptions.size,
                   openedClass: modalOptions.openedClass,
                   appendTo: modalOptions.appendTo
diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js
index 2ea386c8e2..b9ce59553a 100644
--- a/src/modal/test/modal.spec.js
+++ b/src/modal/test/modal.spec.js
@@ -1465,6 +1465,28 @@ describe('$uibModal', function() {
         expect(body).not.toHaveClass('modal-open');
       });
     });
+
+    describe('ariaLabelledBy', function() {
+      it('should add the aria-labelledby property to the modal', function() {
+        open({
+          template: '<div><h3 id="modal-label">Modal Label</h3><p id="modal-description">Modal description</p></div>',
+          ariaLabelledBy: 'modal-label'
+        });
+
+        expect($document.find('.modal').attr('aria-labelledby')).toEqual('modal-label');
+      });
+    });
+
+    describe('ariaDescribedBy', function() {
+      it('should add the aria-describedby property to the modal', function() {
+        open({
+          template: '<div><h3 id="modal-label">Modal Label</h3><p id="modal-description">Modal description</p></div>',
+          ariaDescribedBy: 'modal-description'
+        });
+
+        expect($document.find('.modal').attr('aria-describedby')).toEqual('modal-description');
+      });
+    });
   });
 
   describe('modal window', function() {