fix(accordion): adds role="presentation" to accordion items #11659

Adds `role="presentation"` to accordion items to comply with WAI. Includes the respective unit test.

fix #11659

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index d2e42f9169eee2c013f540948bdaa46225c1c7a9..e2f9116f068412a23a6da2b2aba28aef955a1dd4 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -44,6 +44,8 @@ class Accordion extends Plugin {
 
     this.$element.attr('role', 'tablist');
     this.$tabs = this.$element.children('[data-accordion-item]');
+    
+    this.$tabs.attr({'role': 'presentation'});
 
     this.$tabs.each(function(idx, el) {
       var $el = $(el),

diff --git a/test/javascript/components/accordion.js b/test/javascript/components/accordion.js
index 362a8fef197f902a78177e0ff1e2ce4288a2877d..3158470627cf6e54596137503155e32028ea1d50 100644 (file)
--- a/test/javascript/components/accordion.js
+++ b/test/javascript/components/accordion.js
@@ -39,6 +39,13 @@ describe('Accordion', function() {
       plugin.$element.should.be.an('object');
       plugin.options.should.be.an('object');
     });
+
+    it('applies role="presentation" to the list item to conform with WAI', function () {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {allowAllClosed: true});
+
+      $html.find('.accordion-item').eq(0).should.have.attr('role', 'presentation');
+    });
   });
 
   describe('up()', function(done) {