fix(accordion): remove tab-related roles, add events for HOME and END

remove role="tab", role="tablist", role="tabcontent" and role
presentation. Add events for HOME and END. Changed unit-tests
accordingly.

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 0b9096ee1f164c6f998c1e0bc21970394585cd56..42da199a30905f93eefb6ffdd7a7b0e421a41c78 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -31,7 +31,9 @@ class Accordion extends Plugin {
       'ENTER': 'toggle',
       'SPACE': 'toggle',
       'ARROW_DOWN': 'next',
-      'ARROW_UP': 'previous'
+      'ARROW_UP': 'previous',
+      'HOME': 'first',
+      'END': 'last',
     });
   }
 
@@ -42,10 +44,8 @@ class Accordion extends Plugin {
   _init() {
     this._isInitializing = true;
 
-    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),
@@ -55,13 +55,11 @@ class Accordion extends Plugin {
 
       $el.find('a:first').attr({
         'aria-controls': id,
-        'role': 'tab',
         'id': linkId,
-        'aria-expanded': false,
-        'aria-selected': false
+        'aria-expanded': false
       });
 
-      $content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
+      $content.attr({'role': 'region', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
     });
 
     var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
@@ -156,6 +154,18 @@ class Accordion extends Plugin {
                 $a.trigger('click.zf.accordion')
               }
             },
+            first: function() {
+              var $a = _this.$tabs.first().find('.accordion-title').focus();
+              if (!_this.options.multiExpand) {
+                 $a.trigger('click.zf.accordion');
+              }
+            },
+            last: function() {
+              var $a = _this.$tabs.last().find('.accordion-title').focus();
+              if (!_this.options.multiExpand) {
+                 $a.trigger('click.zf.accordion');
+              }
+            },
             handled: function() {
               e.preventDefault();
             }
@@ -270,8 +280,7 @@ class Accordion extends Plugin {
     $targetItem.addClass('is-active');
 
     $(`#${targetContentId}`).attr({
-      'aria-expanded': true,
-      'aria-selected': true
+      'aria-expanded': true
     });
 
     $target.finish().slideDown(this.options.slideSpeed, () => {
@@ -298,8 +307,7 @@ class Accordion extends Plugin {
     $targetItem.removeClass('is-active');
 
     $(`#${targetContentId}`).attr({
-     'aria-expanded': false,
-     'aria-selected': false
+     'aria-expanded': false
     });
 
     $target.finish().slideUp(this.options.slideSpeed, () => {
@@ -399,4 +407,4 @@ Accordion.defaults = {
   updateHistory: false
 };
 
-export { Accordion };
+export { Accordion };
\ No newline at end of file

diff --git a/test/javascript/components/accordion.js b/test/javascript/components/accordion.js
index 3158470627cf6e54596137503155e32028ea1d50..465d8e597cdaf06af76c2b28b7d01f3543633044 100644 (file)
--- a/test/javascript/components/accordion.js
+++ b/test/javascript/components/accordion.js
@@ -39,13 +39,6 @@ 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) {
@@ -67,7 +60,6 @@ describe('Accordion', function() {
 
       plugin.up($html.find('.accordion-content').eq(0));
       $html.find('.accordion-title').eq(0).should.have.attr('aria-expanded', 'false');
-      $html.find('.accordion-title').eq(0).should.have.attr('aria-selected', 'false');
     });
 
     it('not closes the open container if allowAllClosed is false', function() {
@@ -98,7 +90,6 @@ describe('Accordion', function() {
 
       plugin.down($html.find('.accordion-content').eq(1));
       $html.find('.accordion-title').eq(1).should.have.attr('aria-expanded', 'true');
-      $html.find('.accordion-title').eq(1).should.have.attr('aria-selected', 'true');
     });
 
     it('closes open container if multiExpand is false', function(done) {
@@ -173,6 +164,30 @@ describe('Accordion', function() {
       // Check if focus was moved
       $html.find('.accordion-title').eq(1)[0].should.be.equal(document.activeElement);
     });
+    it('opens first panel on HOME', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {});
+
+      $html.find('.accordion-title').eq(1).focus()
+        .trigger(window.mockKeyboardEvent('HOME'));
+
+      $html.find('.accordion-content').eq(0).should.be.visible;
+      $html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'false');
+      // Check if focus was moved
+      $html.find('.accordion-title').eq(0)[0].should.be.equal(document.activeElement);
+   });
+    it('opens last panel on END', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {});
+
+      $html.find('.accordion-title').eq(1).focus()
+        .trigger(window.mockKeyboardEvent('END'));
+
+      $html.find('.accordion-content').eq(2).should.be.visible;
+      $html.find('.accordion-content').eq(2).should.have.attr('aria-hidden', 'false');
+      // Check if focus was moved
+      $html.find('.accordion-title').eq(2)[0].should.be.equal(document.activeElement);
+    });
     it('opens related panel on ENTER', function() {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Accordion($html, {});