1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 16:44:17 +02:00

Add aria-pressed to single toggle buttons

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

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

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