rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Add aria-pressed to single toggle buttons

Browse Source 
also includes tiny fix/clarification to two existing unit tests for the
.active class, adding data-toggle=“button” explicitly to the tested
buttons

Closes #14819.
This commit is contained in:
Patrick H. Lauke 2014-10-17 15:17:57 +01:00 committed by Heinrich Fenkart
parent 60bb69acd5
commit e1d40f7633
3 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/_includes/js/buttons.html
View File

@ -36,15 +36,19 @@
<h2 id="buttons-single-toggle">Single toggle</h2>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
</div><!-- /example -->
{% highlight html %}
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
<p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
</div>
<h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
<p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>

2
js/button.js
View File

@ -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')

20
js/tests/unit/button.js
View File

@ -85,7 +85,7 @@ $(function () {
})
test('should toggle active', function () {
var $btn = $('<button class="btn">mdo</button>')
var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
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 = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
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 = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
var $inner = $('<i/>')
$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 = $('<div class="btn-group" data-toggle="buttons"/>')
var $btn = $('<button class="btn">fat</button>')