From: Marius Olbertz <marius@owlbertz.de>
Date: Thu, 5 Mar 2015 11:13:23 +0000 (+0100)
Subject: Accessibility for accordions
X-Git-Tag: v5.5.2~68^2~7^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6365%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Accessibility for accordions
---

diff --git a/doc/includes/accordion/examples_accordion_aria.html b/doc/includes/accordion/examples_accordion_aria.html
new file mode 100644
index 000000000..7cc4edc6e
--- /dev/null
+++ b/doc/includes/accordion/examples_accordion_aria.html
@@ -0,0 +1,20 @@
+<ul class="accordion" data-accordion role="tablist">
+  <li class="accordion-navigation">
+    <a href="#panel1d" role="tab" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
+    <div id="panel1d" class="content active" role="tabpanel" aria-labelledby="panel1d-heading">
+      Panel 1. Lorem ipsum dolor
+    </div>
+  </li>
+  <li class="accordion-navigation">
+    <a href="#panel2d"  role="tab" id="panel2d-heading" aria-controls="panel2d">Accordion 2</a>
+    <div id="panel2d" class="content" role="tabpanel" aria-labelledby="panel2d-heading">
+      Panel 2. Lorem ipsum dolor
+    </div>
+  </li>
+  <li class="accordion-navigation">
+    <a href="#panel3d" role="tab" id="panel3d-heading" aria-controls="panel3d">Accordion 3</a>
+    <div id="panel3d" class="content" role="tabpanel" aria-labelledby="panel3d-heading">
+      Panel 3. Lorem ipsum dolor
+    </div>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/doc/pages/components/accordion.html b/doc/pages/components/accordion.html
index 1a61edfd4..78317d89a 100644
--- a/doc/pages/components/accordion.html
+++ b/doc/pages/components/accordion.html
@@ -54,6 +54,27 @@ You can name the accordion so that it can be spread across different parent cont
 
 ***
 
+## Accessibility
+
+For accessible accordions use the markup below, which adds a some of ARIA attributes and roles. Some attributes are automatically added and toggled by the JavaScript.
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+{{> examples_accordion_aria}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    {{> examples_accordion_aria}}
+  </div>
+</div>
+
+***
+
 ### Callbacks
 
 There are two ways to bind to callbacks in your tabs.
diff --git a/js/foundation/foundation.accordion.js b/js/foundation/foundation.accordion.js
index a2ae623f6..5ee4c6a70 100644
--- a/js/foundation/foundation.accordion.js
+++ b/js/foundation/foundation.accordion.js
@@ -18,9 +18,11 @@
       this.bindings(method, options);
     },
 
-    events : function () {
+    events : function (instance) {
       var self = this;
       var S = this.S;
+      self.create(this.S(instance));
+
       S(this.scope)
       .off('.fndtn.accordion')
       .on('click.fndtn.accordion', '[' + this.attr_name() + '] > .accordion-navigation > a', function (e) {
@@ -42,6 +44,9 @@
         if (settings.toggleable && target.is(active_content)) {
           target.parent('.accordion-navigation').toggleClass(settings.active_class, false);
           target.toggleClass(settings.active_class, false);
+          S(this).attr('aria-expanded', function(i, attr){
+              return attr === 'true' ? 'false' : 'true';
+          });
           settings.callback(target);
           target.triggerHandler('toggled', [accordion]);
           accordion.triggerHandler('toggled', [target]);
@@ -51,15 +56,31 @@
         if (!settings.multi_expand) {
           siblings.removeClass(settings.active_class);
           aunts.removeClass(settings.active_class);
+          aunts.children('a').attr('aria-expanded','false');
         }
 
         target.addClass(settings.active_class).parent().addClass(settings.active_class);
         settings.callback(target);
         target.triggerHandler('toggled', [accordion]);
         accordion.triggerHandler('toggled', [target]);
+        S(this).attr('aria-expanded','true');
       });
     },
 
+    create: function($instance) {
+      var self = this,
+          accordion = $instance,
+          aunts = $('> .accordion-navigation', accordion),
+          settings = accordion.data(self.attr_name(true) + '-init') || self.settings;
+
+      aunts.children('a').attr('aria-expanded','false');
+      aunts.has('.' + settings.content_class + '.' + settings.active_class).children('a').attr('aria-expanded','true');
+
+      if (settings.multi_expand) {
+        $instance.attr('aria-multiselectable','true');
+      }
+    },
+
     off : function () {},
 
     reflow : function () {}