Removed automated aria-labelledby features as they aren't needed to ensure accessibility

Added documentation to explain how to utilize aria-labelledby

diff --git a/docs/pages/reveal.md b/docs/pages/reveal.md
index aa9db1de4f65f16d2eaf4b6feed16dd24f8dede5..68572f489d771bb9f27391881c3f954fceb6fcfd 100644 (file)
--- a/docs/pages/reveal.md
+++ b/docs/pages/reveal.md
@@ -186,3 +186,22 @@ $.ajax('/url')
     $modal.html(resp.html).foundation('open');
 });
 ```
+
+
+---
+
+## Accessibility
+
+Modals by default are accessible through the use of various ARIA attributes.  To make a modal even more accessible, designate a label to the modal by adding `aria-labelledby="exampleModalHeader11"` to the container and `id="exampleModalHeader11"` to the elment you want to designate as the label.
+
+```html_example
+<p><a data-open="exampleModal11">Click me for a modal</a></p>
+
+<div class="reveal" id="exampleModal11" aria-labelledby="exampleModalHeader11" data-reveal>
+  <h1 id="exampleModalHeader11">Label for the Modal!</h1>
+  <p class="lead">I am even more accessible than the other modals.</p>
+  <button class="close-button" data-close aria-label="Close Accessible Modal" type="button">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+```

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 1842878eba922f8d401a56939304cd0088c0d6a7..62205a54ad5da916ac511a4eb6cb2fda2c9e4deb 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -47,32 +47,12 @@ class Reveal {
     if(this.isiOS){ this.$element.addClass('is-ios'); }
 
     this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`);
-    // Accessibility Update: An element that envokes a modal should have a tabindex of zero and aria tags
     this.$anchor.attr({
       'aria-controls': this.id,
       'aria-haspopup': true,
       'tabindex': 0
     });
 
-    // Accessibility Update : Conditional to determine which elements provides the aria-labeledby content.
-    // If there is a header associate the aria-labeledby to the header vs. the link
-    this.$header = $(this.$element.find('h1,h2,h3,h4,h5,h6')[0]);
-    if( this.$header.length ){
-      var headerId = this.$header[0].id || Foundation.GetYoDigits(6, 'reveal');
-      this.$header.attr({
-        'id': headerId
-      });
-      this.$element.attr({'aria-labelledby': headerId});
-
-    // If no header associate the link text to the aria-labeledby
-    } else if (this.$anchor.length) {
-      var anchorId = this.$anchor[0].id || Foundation.GetYoDigits(6, 'reveal');
-      this.$anchor.attr({
-        'id': anchorId,
-      });
-      this.$element.attr({'aria-labelledby': anchorId});
-    }
-
     if (this.options.fullScreen || this.$element.hasClass('full')) {
       this.options.fullScreen = true;
       this.options.overlay = false;
@@ -240,14 +220,24 @@ class Reveal {
        */
       this.$element.trigger('closeme.zf.reveal', this.id);
     }
-
     // Motion UI method of reveal
     if (this.options.animationIn) {
+      var _this = this;
+      function afterAnimationFocus(){
+        _this.$element
+          .attr({
+            'aria-hidden': false,
+            'tabindex': -1
+          })
+          .focus();
+          console.log('focus');
+      }
       if (this.options.overlay) {
         Foundation.Motion.animateIn(this.$overlay, 'fade-in');
       }
       Foundation.Motion.animateIn(this.$element, this.options.animationIn, () => {
         this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
+        afterAnimationFocus();
       });
     }
     // jQuery method of reveal