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 @@
Add data-toggle="button"
to activate toggling on a single button.
-
{% highlight html %}
-
+
Single toggle
{% 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.
+
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 = $('mdo')
+ var $btn = $('mdo')
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 = $('redux')
+ 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 = $('redux')
+ 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 = $('fat')