fix: apply aria-expanded to the toggler triggers in _updateARIA

diff --git a/js/foundation.toggler.js b/js/foundation.toggler.js
index 65effcbbe828818a9762b953cd1092736b5e15ff..6427e2c95e761923cb2d1f393aa92f0649480ec0 100644 (file)
--- a/js/foundation.toggler.js
+++ b/js/foundation.toggler.js
@@ -126,7 +126,11 @@ class Toggler extends Plugin {
   }
 
   _updateARIA(isOn) {
-    this.$element.attr('aria-expanded', isOn ? true : false);
+    var id = this.$element[0].id;
+    $(`[data-open="${id}"], [data-close="${id}"], [data-toggle="${id}"]`)
+      .attr({
+        'aria-expanded': isOn ? true : false
+      });
   }
 
   /**

diff --git a/test/javascript/components/toggler.js b/test/javascript/components/toggler.js
index 322bf9e3e4c10bb20f756042711c090022d789b3..65c6ed77fd32181eb27c6fa891dcafa6ce764677 100644 (file)
--- a/test/javascript/components/toggler.js
+++ b/test/javascript/components/toggler.js
@@ -106,13 +106,22 @@ describe('Toggler', function() {
 
     it('updates aria-expanded after the class is toggled', function() {
       $html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
+      var $triggers = $(`<div>
+          <a data-open="toggler">Open</a>
+          <a data-close="toggler">Close</a>
+          <a data-toggle="toggler">Toggle</a>
+        </div>`).appendTo('body');
       plugin = new Foundation.Toggler($html, {});
 
       plugin._toggleClass();
-      $('#toggler').should.have.attr('aria-expanded', 'true');
+      $triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
+      $triggers.find('[data-close]').should.have.attr('aria-expanded', 'true');
+      $triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
 
       plugin._toggleClass();
-      $('#toggler').should.have.attr('aria-expanded', 'false');
+      $triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
+      $triggers.find('[data-close]').should.have.attr('aria-expanded', 'false');
+      $triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
     });
   });
 
@@ -121,11 +130,19 @@ describe('Toggler', function() {
     it('animates an invisible element in', function(done) {
       var $css = $('<style>#toggler { display: none; }</style>').appendTo('body');
       $html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
+      var $triggers = $(`<div>
+          <a data-open="toggler">Open</a>
+          <a data-close="toggler">Close</a>
+          <a data-toggle="toggler">Toggle</a>
+        </div>`).appendTo('body');
+
       plugin = new Foundation.Toggler($html, {});
 
       $html.on('on.zf.toggler', function() {
         $('#toggler').should.be.visible;
-        $('#toggler').should.have.attr('aria-expanded', 'true');
+        $triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
+        $triggers.find('[data-close]').should.have.attr('aria-expanded', 'true');
+        $triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
         $css.remove();
         done();
       });
@@ -135,11 +152,19 @@ describe('Toggler', function() {
 
     it('animates an visible element out', function(done) {
       $html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
+      var $triggers = $(`<div>
+          <a data-open="toggler">Open</a>
+          <a data-close="toggler">Close</a>
+          <a data-toggle="toggler">Toggle</a>
+        </div>`).appendTo('body');
+
       plugin = new Foundation.Toggler($html, {});
 
       $html.on('off.zf.toggler', function() {
         $('#toggler').should.be.hidden;
-        $('#toggler').should.have.attr('aria-expanded', 'false');
+        $triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
+        $triggers.find('[data-close]').should.have.attr('aria-expanded', 'false');
+        $triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
         done();
       });