From: Antti Hukkanen <antti.hukkanen@mainiotech.fi>
Date: Thu, 12 Aug 2021 12:05:38 +0000 (+0300)
Subject: fix(reveal): mark correct aria-haspopup value for modal opening controls
X-Git-Tag: v6.7.1~34^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F12248%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix(reveal): mark correct aria-haspopup value for modal opening controls

The correct value for `aria-haspopup` for dialog controlling
elements is "dialog", not "true" which indicates a menu element.
See: https://www.w3.org/TR/wai-aria-1.1/#dialog
---

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index b20b04e32..baacfbbf8 100644
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -55,7 +55,7 @@ class Reveal extends Plugin {
     this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`);
     this.$anchor.attr({
       'aria-controls': this.id,
-      'aria-haspopup': true,
+      'aria-haspopup': 'dialog',
       'tabindex': 0
     });
 
diff --git a/test/javascript/components/reveal.js b/test/javascript/components/reveal.js
index 1c20797a8..224e88891 100644
--- a/test/javascript/components/reveal.js
+++ b/test/javascript/components/reveal.js
@@ -48,7 +48,7 @@ describe('Reveal', function() {
       var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
-      $anchor.should.have.attr('aria-haspopup', 'true');
+      $anchor.should.have.attr('aria-haspopup', 'dialog');
       $anchor.should.have.attr('aria-controls', $html.attr('id'));
 
       $anchor.remove();