Issue #7904 should be addressed by updating various ARIA related issues.

Removed aria-hidden on both the body and the overlay. Since the modals are children of both of those anything that has an aria-hidden=true will be ignored by the screen reader. This is why with a keyboard you can tab around int he modal but when you use a screen reader and you tab around you can't access the content within the modal.

I also enhanced the aria-labeledby by checking to see if the modal has a H Tag (H1,2,3,4,5,6) of sorts. If it finds a H Tag the first one found will be associated to the aria-labeledby and thus will result with that text announced to the a screen reader after opening a modal. if there is no header it will utilize the element (href, button, etc...) that opened the modal and associated itself to the aria-labeledby and thus will result with that text announced to the a screen reader after opening a modal.

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 29bd3571dcb9e2b30c6c9cd3f35ab9cf00f6b0bb..1842878eba922f8d401a56939304cd0088c0d6a7 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -47,15 +47,28 @@ 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
+    });
 
-    if (this.$anchor.length) {
-      var anchorId = this.$anchor[0].id || Foundation.GetYoDigits(6, 'reveal');
+    // 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({
-        'aria-controls': this.id,
         'id': anchorId,
-        'aria-haspopup': true,
-        'tabindex': 0
       });
       this.$element.attr({'aria-labelledby': anchorId});
     }
@@ -94,7 +107,6 @@ class Reveal {
   _makeOverlay(id) {
     var $overlay = $('<div></div>')
                     .addClass('reveal-overlay')
-                    .attr({'tabindex': -1, 'aria-hidden': true})
                     .appendTo('body');
     return $overlay;
   }
@@ -269,8 +281,7 @@ class Reveal {
     }
 
     $('body')
-      .addClass('is-reveal-open')
-      .attr('aria-hidden', (this.options.overlay || this.options.fullScreen) ? true : false);
+      .addClass('is-reveal-open');
 
     setTimeout(() => {
       this._extraHandlers();