mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 08:34:08 +02:00
Only change aria-pressed if it's not an input-based radio or checkbox group
* Only change aria-pressed if it's not an input-based radio or checkbox group aria-pressed="true"/aria-pressed="false" is really only useful for making on/off toggles out of, say, `<button>` elements. the attribute is useless (and potentially confusing/conflicting) on, say, `<label>` elements for an existing `<input type="radio">` or similar. * Add unit test for buttons.js and radio/checkbox inputs in button groups
This commit is contained in:
@@ -66,6 +66,7 @@ const Button = (($) => {
|
|||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
let triggerChangeEvent = true
|
let triggerChangeEvent = true
|
||||||
|
let addAriaPressed = true
|
||||||
const rootElement = $(this._element).closest(
|
const rootElement = $(this._element).closest(
|
||||||
Selector.DATA_TOGGLE
|
Selector.DATA_TOGGLE
|
||||||
)[0]
|
)[0]
|
||||||
@@ -94,12 +95,15 @@ const Button = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input.focus()
|
input.focus()
|
||||||
|
addAriaPressed = false
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (addAriaPressed) {
|
||||||
this._element.setAttribute('aria-pressed',
|
this._element.setAttribute('aria-pressed',
|
||||||
!$(this._element).hasClass(ClassName.ACTIVE))
|
!$(this._element).hasClass(ClassName.ACTIVE))
|
||||||
|
}
|
||||||
|
|
||||||
if (triggerChangeEvent) {
|
if (triggerChangeEvent) {
|
||||||
$(this._element).toggleClass(ClassName.ACTIVE)
|
$(this._element).toggleClass(ClassName.ACTIVE)
|
||||||
|
@@ -138,4 +138,22 @@ $(function () {
|
|||||||
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
|
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
|
||||||
|
assert.expect(2)
|
||||||
|
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
|
||||||
|
+ '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>'
|
||||||
|
+ '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>'
|
||||||
|
+ '</div>'
|
||||||
|
var $group = $(groupHTML).appendTo('#qunit-fixture')
|
||||||
|
|
||||||
|
var $btn1 = $group.children().eq(0)
|
||||||
|
var $btn2 = $group.children().eq(1)
|
||||||
|
|
||||||
|
$btn1.find('input').trigger('click')
|
||||||
|
assert.ok($btn1.is(':not([aria-pressed])'), 'label for nested checkbox input has not been given an aria-pressed attribute')
|
||||||
|
|
||||||
|
$btn2.find('input').trigger('click')
|
||||||
|
assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute')
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
Reference in New Issue
Block a user