From 4060b578ed5d99a2862f0f276c06038da19c9fd1 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 1 Mar 2016 16:34:34 -0800 Subject: [PATCH] When using the arrow keys on an accordion with multiExpand set, don't open/close accordion panes when the arrow keys are used to navigate titles. Fixes #7440 --- js/foundation.accordion.js | 32 +++++++------- test/visual/accordion/focus.html | 73 ++++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+), 16 deletions(-) create mode 100644 test/visual/accordion/focus.html diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js index ae3381608..41dbd349d 100644 --- a/js/foundation.accordion.js +++ b/js/foundation.accordion.js @@ -94,10 +94,16 @@ class Accordion { _this.toggle($tabContent); }, next: function() { - $elem.next().find('a').focus().trigger('click.zf.accordion'); + var $a = $elem.next().find('a').focus(); + if (!_this.options.multiExpand) { + $a.trigger('click.zf.accordion') + } }, previous: function() { - $elem.prev().find('a').focus().trigger('click.zf.accordion'); + var $a = $elem.prev().find('a').focus(); + if (!_this.options.multiExpand) { + $a.trigger('click.zf.accordion') + } }, handled: function() { e.preventDefault(); @@ -132,8 +138,7 @@ class Accordion { * @function */ down($target, firstTime) { - var _this = this; - if(!this.options.multiExpand && !firstTime){ + if (!this.options.multiExpand && !firstTime) { var $currentActive = this.$element.find('.is-active').children('[data-tab-content]'); if($currentActive.length){ this.up($currentActive); @@ -146,19 +151,14 @@ class Accordion { .addBack() .parent().addClass('is-active'); - // Foundation.Move(_this.options.slideSpeed, $target, function(){ - $target.slideDown(_this.options.slideSpeed, function () { - /** - * Fires when the tab is done opening. - * @event Accordion#down - */ - _this.$element.trigger('down.zf.accordion', [$target]); - }); - // }); + $target.slideDown(this.options.slideSpeed, () => { + /** + * Fires when the tab is done opening. + * @event Accordion#down + */ + this.$element.trigger('down.zf.accordion', [$target]); + }); - // if(!firstTime){ - // Foundation._reflow(this.$element.attr('data-accordion')); - // } $(`#${$target.attr('aria-labelledby')}`).attr({ 'aria-expanded': true, 'aria-selected': true diff --git a/test/visual/accordion/focus.html b/test/visual/accordion/focus.html new file mode 100644 index 000000000..dce57aeb5 --- /dev/null +++ b/test/visual/accordion/focus.html @@ -0,0 +1,73 @@ + + + + + + + Foundation for Sites Testing + + + +
+

Accordion: Focus Management

+ +

This is a stock accordion. The tab key will cycle through accordion panes without opening/closing. The up/down arrow keys will cycle through accordion panes, opening the one you move to, and closing the one you move away from.

+ + + +
+ +

This is an accordion with multiExpand set to "true". Using the up/down arrow keys will cycle between accordion titles without opening/closing them, and pressing space will open or close a pane.

+ + +
+ + + + + + -- 2.47.2