diff options
| author | Ivan Cheung <[email protected]> | 2015-02-04 16:25:57 -0600 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2015-02-26 18:48:20 -0800 |
| commit | d5071b19f181c1cb4f71ae77ca5effbccca6c66e (patch) | |
| tree | 29b906110c140a8274965c6082526c9d7aeb1f89 | |
| parent | 984204c39e00d267f49c39d100d0ac2aab8dae9c (diff) | |
| download | bootstrap-d5071b19f181c1cb4f71ae77ca5effbccca6c66e.tar.xz bootstrap-d5071b19f181c1cb4f71ae77ca5effbccca6c66e.zip | |
Update all collapse triggers with .collapsed class and aria-expanded
Fixes #15741
Closes #15751 by merging it.
| -rw-r--r-- | js/collapse.js | 8 | ||||
| -rw-r--r-- | js/tests/unit/collapse.js | 74 |
2 files changed, 75 insertions, 7 deletions
diff --git a/js/collapse.js b/js/collapse.js index 2bc30e7ba..834f4f6b8 100644 --- a/js/collapse.js +++ b/js/collapse.js @@ -16,7 +16,8 @@ var Collapse = function (element, options) { this.$element = $(element) this.options = $.extend({}, Collapse.DEFAULTS, options) - this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]') + this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' + + '[data-toggle="collapse"][data-target="#' + element.id + '"]') this.transitioning = null if (this.options.parent) { @@ -33,8 +34,7 @@ Collapse.TRANSITION_DURATION = 350 Collapse.DEFAULTS = { - toggle: true, - trigger: '[data-toggle="collapse"]' + toggle: true } Collapse.prototype.dimension = function () { @@ -203,7 +203,7 @@ var $target = getTargetFromTrigger($this) var data = $target.data('bs.collapse') - var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this }) + var option = data ? 'toggle' : $this.data() Plugin.call($target, option) }) diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index c1a41a45f..8fe367532 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -80,7 +80,7 @@ $(function () { $('<div id="test1"/>') .appendTo('#qunit-fixture') .on('shown.bs.collapse', function () { - assert.ok(!$target.hasClass('collapsed')) + assert.ok(!$target.hasClass('collapsed'), 'target does not have collapsed class') done() }) @@ -95,7 +95,41 @@ $(function () { $('<div id="test1" class="in"/>') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { - assert.ok($target.hasClass('collapsed')) + assert.ok($target.hasClass('collapsed'), 'target has collapsed class') + done() + }) + + $target.click() + }) + + QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) { + var done = assert.async() + + var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') + var $alt = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') + + $('<div id="test1"/>') + .appendTo('#qunit-fixture') + .on('shown.bs.collapse', function () { + assert.ok(!$target.hasClass('collapsed'), 'target trigger does not have collapsed class') + assert.ok(!$alt.hasClass('collapsed'), 'alt trigger does not have collapsed class') + done() + }) + + $target.click() + }) + + QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) { + var done = assert.async() + + var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') + var $alt = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') + + $('<div id="test1" class="in"/>') + .appendTo('#qunit-fixture') + .on('hidden.bs.collapse', function () { + assert.ok($target.hasClass('collapsed'), 'target has collapsed class') + assert.ok($alt.hasClass('collapsed'), 'alt trigger has collapsed class') done() }) @@ -230,6 +264,40 @@ $(function () { $target.click() }) + QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) { + var done = assert.async() + + var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') + var $alt = $('<a data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') + + $('<div id="test1"/>') + .appendTo('#qunit-fixture') + .on('shown.bs.collapse', function () { + assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"') + assert.strictEqual($alt.attr('aria-expanded'), 'true', 'aria-expanded on alt is "true"') + done() + }) + + $target.click() + }) + + QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) { + var done = assert.async() + + var $target = $('<a data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') + var $alt = $('<a data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') + + $('<div id="test1" class="in"/>') + .appendTo('#qunit-fixture') + .on('hidden.bs.collapse', function () { + assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') + assert.strictEqual($alt.attr('aria-expanded'), 'false', 'aria-expanded on alt is "false"') + done() + }) + + $target.click() + }) + QUnit.test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function (assert) { var done = assert.async() @@ -293,7 +361,7 @@ $(function () { $target1.click() setTimeout(function () { - assert.ok(!showFired, 'show event didn\'t fire') + assert.ok(!showFired, 'show event did not fire') done() }, 1) }) |
