feat(modal): 508 support in modal (mgcrea#2229)

mikejr83 · David Dutch · commit ad51c5bf4a98 · 2018-10-27T11:33:13.000+02:00
* feat(modal): 508 support in modal

508 and screen-reader support in modal.

* fix(eslint): Modal eslint errors

Fix the eslint erros with modal.js.

* fix(modal): fix skipped tests

Remove the force flag from the modal tests.

* fix(modal): aria-hidden on body without backdrop

Only apply the aria-hidden to the body element when the backdrop option
is specified.
diff --git a/docs/dev.html b/docs/dev.html
@@ -46,7 +46,7 @@
 <body ontouchstart ng-controller="MainCtrl">
 
   <div class="container">
-    <!-- <div ng-include="'modal/docs/modal.demo.html'"></div> -->
+     <div ng-include="'modal/docs/modal.demo.html'"></div> 
     <!-- <div ng-include="'aside/docs/aside.demo.html'"></div> -->
     <!-- <div ng-include="'alert/docs/alert.demo.html'"></div> -->
     <!-- <div ng-include="'tooltip/docs/tooltip.demo.html'"></div> -->
@@ -58,7 +58,7 @@
     <!-- <div ng-include="'select/docs/select.demo.html'"></div> -->
     <!-- <div ng-include="'tab/docs/tab.demo.html'"></div> -->
     <!-- <div ng-include="'collapse/docs/collapse.demo.html'"></div> -->
-    <div ng-include="'dropdown/docs/dropdown.demo.html'"></div>
+    <!--<div ng-include="'dropdown/docs/dropdown.demo.html'"></div>-->
     <!-- <div ng-include="'navbar/docs/navbar.demo.html'"></div> -->
     <!-- <div ng-include="'scrollspy/docs/scrollspy.demo.html'"></div> -->
     <!-- <div ng-include="'affix/docs/affix.demo.html'"></div> -->
diff --git a/src/modal/docs/modal.demo.html b/src/modal/docs/modal.demo.html
@@ -10,7 +10,8 @@ <h1 id="modals">Modals <a class="small" href="//github.com/mgcrea/angular-strap/
   <h2 id="modals-examples">Examples</h2>
   <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
 
-  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="modal/docs/modal.demo.html" data-content-js-url="modal/docs/modal.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
+  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="modal/docs/modal.demo.html"
+      data-content-js-url="modal/docs/modal.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
   <pre class="bs-example-scope">$scope.modal = {{modal | json}};</pre>
   <div class="bs-example" style="padding-bottom: 24px;" append-source>
 
@@ -21,7 +22,8 @@ <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs"
     </button>
 
     <!-- You can use a custom html template with the `data-template` attr -->
-    <button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template-url="modal/docs/modal.demo.tpl.html" bs-modal="modal">Custom Modal
+    <button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template-url="modal/docs/modal.demo.tpl.html"
+      bs-modal="modal">Custom Modal
       <br />
       <small>(using data-template)</small>
     </button>
@@ -35,6 +37,20 @@ <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs"
 
   </div>
 
+  <h3>508 Usage</h3>
+  <p>
+    For modal dialogs to be 508 and screen reader compliant please use the following examples. The <code>backdrop</code>    must be set to <em>static</em> and
+    <code>keyboard</code> must be set to a truthy value. Please be aware that the directive use-case handles returning focus
+    to the item which opens the modal dialog. In scenarios where the <code>$modal</code> service is used it will be up to
+    the implementation to return focus to the element which initiated the action to open the dialog.
+  </p>
+  <div class="bs-example" style="padding-bottom: 24px;" append-source>
+    <button type="button" class="btn btn-primary" data-template-url="modal/docs/modal.demo.tpl.html" bs-modal="modal" keyboard="true"
+      backdrop="static">
+      Custom 508 Modal
+    </button>
+  </div>
+
   <div class="callout callout-info">
     <h4>Backdrop animation</h4>
     <p>Backdrop animation being powered by <code>ngAnimate</code>, it requires custom CSS.</p>
@@ -87,8 +103,9 @@ <h4>The module also exposes a <code>$modal</code>service</h4>
 
 
   <h3>Options</h3>
-  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
-  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-modal</code> attribute</p>
+  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes,
+    append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
+  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a>    to evaluate as an object directly on the <code>bs-modal</code> attribute</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
@@ -141,7 +158,8 @@ <h3>Options</h3>
           <td>boolean or the string <code>'static'</code>
           </td>
           <td>true</td>
-          <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code>for a backdrop which doesn't close the modal on click.</td>
+          <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code>for a backdrop which doesn't close
+            the modal on click.</td>
         </tr>
         <tr>
           <td>keyboard</td>
@@ -160,15 +178,18 @@ <h3>Options</h3>
           <td>string | false</td>
           <td>false</td>
           <td>
-            <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -&nbsp;which will prevent the popover from floating away from the triggering element during a window resize.</p>
+            <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly
+              useful in that it allows you to position the popover in the flow of the document near the triggering element
+              -&nbsp;which will prevent the popover from floating away from the triggering element during a window resize.</p>
           </td>
         </tr>
         <tr>
           <td>controller</td>
           <td>string|function</td>
           <td>false</td>
           <td>
-            <p>Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.</p>
+            <p>Controller fn that should be associated with newly created scope or the name of a registered controller if passed
+              as a string.</p>
           </td>
         </tr>
         <tr>
@@ -184,15 +205,17 @@ <h3>Options</h3>
           <td>object</td>
           <td>false</td>
           <td>
-            <p>Object containing dependencies that will be injected into the controller's constructor when all the dependencies have resolved. The controller won't load if the promise is rejected.</p>
+            <p>Object containing dependencies that will be injected into the controller's constructor when all the dependencies
+              have resolved. The controller won't load if the promise is rejected.</p>
           </td>
         </tr>
         <tr>
           <td>locals</td>
           <td>object</td>
           <td>false</td>
           <td>
-            <p>Object containing dependencies that will be injected into the controller's constructor. Similar to resolve but expects literal values instead of promises.</p>
+            <p>Object containing dependencies that will be injected into the controller's constructor. Similar to resolve but
+              expects literal values instead of promises.</p>
           </td>
         </tr>
         <tr>
@@ -209,23 +232,26 @@ <h3>Options</h3>
           <td>'modal/modal.tpl.html'</td>
           <td>
             <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
-            <p>It should be a <code>div.modal</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/modal/modal.tpl.html" target="_blank">like this</a>).</p>
+            <p>It should be a <code>div.modal</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/modal/modal.tpl.html"
+                target="_blank">like this</a>).</p>
           </td>
         </tr>
         <tr>
           <td>contentTemplate</td>
           <td>path</td>
           <td>false</td>
           <td>
-            <p>If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.</p>
+            <p>If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached
+              template id.</p>
           </td>
         </tr>
         <tr>
           <td>prefixEvent</td>
           <td>string</td>
           <td>'modal'</td>
           <td>
-            <p>If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value. With the default value these events are 'modal.hide.before' 'modal.hide' 'modal.show.before' and 'modal.show'</p>
+            <p>If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value.
+              With the default value these events are 'modal.hide.before' 'modal.hide' 'modal.show.before' and 'modal.show'</p>
           </td>
         </tr>
         <tr>
@@ -273,7 +299,7 @@ <h3>Options</h3>
           <td>number</td>
           <td>1050</td>
           <td>
-             CSS z-index value for the modal.
+            CSS z-index value for the modal.
           </td>
         </tr>
       </tbody>
@@ -308,4 +334,4 @@ <h4>$hide()</h4>
   <h4>$toggle()</h4>
   <p>Toggles the modal.</p>
 
-</div>
+</div>
diff --git a/src/modal/modal.js b/src/modal/modal.js
@@ -62,6 +62,10 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
         // element id if defined
         $modal.$id = options.id || options.element && options.element.attr('id') || '';
 
+        $modal.returnFocus = function () {
+
+        };
+
         // Support scope as string options
         forEach(['title', 'content'], function (key) {
           if (options[key]) scope[key] = $sce.trustAsHtml(options[key]);
@@ -209,6 +213,12 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
           });
 
           bodyElement.addClass(options.prefixClass + '-open');
+          // Add assistive attributes to the body to prevent the screen reader from reading it with the virtual keys
+          // Only do this if the backdrop option is set.
+          if (options.backdrop) {
+            bodyElement.attr('aria-hidden', 'true');
+          }
+
           if (options.animation) {
             bodyElement.addClass(options.prefixClass + '-with-' + options.animation);
           }
@@ -224,6 +234,9 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
           if (angular.isDefined(options.onShow) && angular.isFunction(options.onShow)) {
             options.onShow($modal);
           }
+
+          modalElement.attr('aria-hidden', 'false');
+          modalElement[0].focus();
         }
 
         $modal.hide = function () {
@@ -236,6 +249,10 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
             options.onBeforeHide($modal);
           }
 
+          modalElement.attr('aria-hidden', 'true');
+
+          if ($modal.returnFocus && typeof $modal.returnFocus === 'function') $modal.returnFocus();
+
           // Support v1.2+ $animate
           // https://github.com/angular/angular.js/issues/11713
           if (angular.version.minor <= 2) {
@@ -264,12 +281,42 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
           }
           if (findElement('.modal').length <= 0) {
             bodyElement.removeClass(options.prefixClass + '-open');
+            if (options.backdrop) {
+              bodyElement.attr('aria-hidden', 'false');
+            }
           }
           if (options.animation) {
             bodyElement.removeClass(options.prefixClass + '-with-' + options.animation);
           }
         }
 
+        function findFocusableElements () {
+          // Add all elements we want to include in our selection
+          var focusableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
+          if (document.activeElement) {
+            var focusable = Array.prototype.filter.call(modalElement[0].querySelectorAll(focusableElements),
+              function (element) {
+                // Check for visibility while always include the current activeElement
+                return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
+              });
+
+            return focusable;
+          }
+        }
+
+        function findNextFocusableElement (inReverse) {
+          if (document.activeElement) {
+            var focusable = findFocusableElements();
+            if (focusable === undefined) return;
+            if (inReverse) {
+              focusable = Array.prototype.reverse.call(focusable);
+            }
+
+            var index = focusable.indexOf(document.activeElement);
+            return focusable[index + 1];
+          }
+        }
+
         $modal.toggle = function () {
           if ($modal.$isShown) {
             $modal.hide();
@@ -286,11 +333,31 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
 
         $modal.$onKeyUp = function (evt) {
 
+          // Escape was pressed on an open modal. Hide it.
           if (evt.which === 27 && $modal.$isShown) {
             $modal.hide();
             evt.stopPropagation();
           }
+        };
 
+        $modal.$onKeyDown = function (evt) {
+          if (options.keyboard) {
+            if (evt.keyCode === 9) {
+
+              var nextFocusable = findNextFocusableElement(evt.shiftKey);
+              if (nextFocusable === undefined) {
+                if (evt.preventDefault) evt.preventDefault();
+                if (evt.stopPropagation) evt.stopPropagation();
+
+                var focusable = findFocusableElements();
+                if (evt.shiftKey) {
+                  focusable[focusable.length - 1].focus();
+                } else {
+                  focusable[0].focus();
+                }
+              }
+            }
+          }
         };
 
         function bindBackdropEvents () {
@@ -312,12 +379,14 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
         function bindKeyboardEvents () {
           if (options.keyboard) {
             modalElement.on('keyup', $modal.$onKeyUp);
+            modalElement.on('keydown', $modal.$onKeyDown);
           }
         }
 
         function unbindKeyboardEvents () {
           if (options.keyboard) {
             modalElement.off('keyup', $modal.$onKeyUp);
+            modalElement.off('keydown', $modal.$onKeyDown);
           }
         }
 
@@ -431,6 +500,12 @@ angular.module('mgcrea.ngStrap.modal', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap.h
         // Initialize modal
         var modal = $modal(options);
 
+        if (options.keyboard) {
+          modal.returnFocus = function () {
+            element[0].focus();
+          };
+        }
+
         // Trigger
         element.on(attr.trigger || 'click', modal.toggle);
 
diff --git a/src/modal/modal.tpl.html b/src/modal/modal.tpl.html
@@ -1,4 +1,4 @@
-<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal" tabindex="0" role="dialog" aria-hidden="true">
 <!--<span role="dialog" class="sr-only"></span>-->
   <div class="modal-dialog">
     <div class="modal-content">
diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">`
	`1`	`+<div class="modal" tabindex="0" role="dialog" aria-hidden="true">`
`2`	`2`	`<!--<span role="dialog" class="sr-only"></span>-->`
`3`	`3`	`<div class="modal-dialog">`
`4`	`4`	`<div class="modal-content">`