diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html index 617fc8c815..cf0bfcb9e0 100644 --- a/docs/_includes/js/buttons.html +++ b/docs/_includes/js/buttons.html @@ -36,15 +36,19 @@

Single toggle

Add data-toggle="button" to activate toggling on a single button.

-
{% highlight html %} - {% endhighlight %} +
+

Pre-toggled buttons need .active and aria-pressed="true"

+

For pre-toggled buttons, you must add the .active class and the aria-pressed="true" attribute to the button yourself.

+

Checkbox / Radio

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

diff --git a/js/button.js b/js/button.js index b3e944c591..901e47a6e9 100644 --- a/js/button.js +++ b/js/button.js @@ -60,6 +60,8 @@ else $parent.find('.active').removeClass('active') } if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change') + } else { + this.$element.attr('aria-pressed', !this.$element.hasClass('active')) } if (changed) this.$element.toggleClass('active') diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index bd431d5467..73747cdd4f 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -85,7 +85,7 @@ $(function () { }) test('should toggle active', function () { - var $btn = $('') + var $btn = $('') ok(!$btn.hasClass('active'), 'btn does not have active class') $btn.bootstrapButton('toggle') ok($btn.hasClass('active'), 'btn has class active') @@ -102,6 +102,24 @@ $(function () { ok($btn.hasClass('active'), 'btn has class active') }) + test('should toggle aria-pressed', function () { + var $btn = $('') + equal($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false') + $btn.bootstrapButton('toggle') + equal($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true') + }) + + test('should toggle aria-pressed when btn children are clicked', function () { + var $btn = $('') + var $inner = $('') + $btn + .append($inner) + .appendTo('#qunit-fixture') + equal($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false') + $inner.click() + equal($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true') + }) + test('should toggle active when btn children are clicked within btn-group', function () { var $btngroup = $('
') var $btn = $('')