From: Ruben Pascal Abel <ruben.abel@certeo.de>
Date: Thu, 2 May 2019 12:20:24 +0000 (+0200)
Subject: fix: if not animate, use toggler class to determine aria-expanded state
X-Git-Tag: v6.6.0~3^2~8^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F11748%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: if not animate, use toggler class to determine aria-expanded state
---

diff --git a/js/foundation.toggler.js b/js/foundation.toggler.js
index ec630ac9d..cdfd26140 100644
--- a/js/foundation.toggler.js
+++ b/js/foundation.toggler.js
@@ -41,6 +41,10 @@ class Toggler extends Plugin {
    * @private
    */
   _init() {
+    // Collect triggers to set ARIA attributes to
+    var id = this.$element[0].id,
+      $triggers = $(`[data-open~="${id}"], [data-close~="${id}"], [data-toggle~="${id}"]`);
+
     var input;
     // Parse animation classes if they were set
     if (this.options.animate) {
@@ -48,6 +52,9 @@ class Toggler extends Plugin {
 
       this.animationIn = input[0];
       this.animationOut = input[1] || null;
+
+      // - aria-expanded: according to the element visibility.
+      $triggers.attr('aria-expanded', !this.$element.is(':hidden'));
     }
     // Otherwise, parse toggle class
     else {
@@ -57,14 +64,11 @@ class Toggler extends Plugin {
       }
       // Allow for a . at the beginning of the string
       this.className = input[0] === '.' ? input.slice(1) : input;
-    }
 
-    // Add ARIA attributes to triggers:
-    var id = this.$element[0].id,
-      $triggers = $(`[data-open~="${id}"], [data-close~="${id}"], [data-toggle~="${id}"]`);
+      // - aria-expanded: according to the elements class set.
+      $triggers.attr('aria-expanded', this.$element.hasClass(this.className));
+    }
 
-    // - aria-expanded: according to the element visibility.
-    $triggers.attr('aria-expanded', !this.$element.is(':hidden'));
     // - aria-controls: adding the element id to it if not already in it.
     $triggers.each((index, trigger) => {
       const $trigger = $(trigger);
diff --git a/test/javascript/components/toggler.js b/test/javascript/components/toggler.js
index 84a82a297..7f65b93a9 100644
--- a/test/javascript/components/toggler.js
+++ b/test/javascript/components/toggler.js
@@ -57,18 +57,36 @@ describe('Toggler', function() {
       $triggers.remove();
     });
 
-    it('sets aria-expanded to true if the element is visible', function() {
+    it('sets aria-expanded to false if the element has toggler class and no animate and toggler class not in class set', function() {
       $html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
       var $triggers = appendTriggers();
       plugin = new Foundation.Toggler($html, {});
 
+      $triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'false');
+      $triggers.remove();
+    });
+
+    it('sets aria-expanded to true if the element has toggler class and no animate and toggler class is in class set', function() {
+      $html = $('<div id="toggler" class="class" data-toggler="class"></div>').appendTo('body');
+      var $triggers = appendTriggers();
+      plugin = new Foundation.Toggler($html, {});
+
       $triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'true');
       $triggers.remove();
     });
 
-    it('sets aria-expanded to false if the element is invisible', function() {
+    it('sets aria-expanded to true if the element is visible and animate set', function() {
+      $html = $('<div id="toggler" data-animate="hinge-in-from-top spin-out"></div>').appendTo('body');
+      var $triggers = appendTriggers();
+      plugin = new Foundation.Toggler($html, {});
+
+      $triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'true');
+      $triggers.remove();
+    });
+
+    it('sets aria-expanded to false if the element is invisible and animate set', function() {
       var $css = $('<style>#toggler { display: none }</style>').appendTo('body');
-      $html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
+      $html = $('<div id="toggler" data-animate="hinge-in-from-top spin-out"></div>').appendTo('body');
       var $triggers = appendTriggers();
       plugin = new Foundation.Toggler($html, {});