Skip to content

Commit

Permalink
Only change aria-pressed if it's not an input-based radio or checkbox…
Browse files Browse the repository at this point in the history
… 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
  • Loading branch information
patrickhlauke authored Apr 10, 2017
1 parent 278ddd0 commit 3f6e1fa
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 2 deletions.
8 changes: 6 additions & 2 deletions js/src/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ const Button = (($) => {

toggle() {
let triggerChangeEvent = true
let addAriaPressed = true
const rootElement = $(this._element).closest(
Selector.DATA_TOGGLE
)[0]
Expand Down Expand Up @@ -94,12 +95,15 @@ const Button = (($) => {
}

input.focus()
addAriaPressed = false
}

}

this._element.setAttribute('aria-pressed',
!$(this._element).hasClass(ClassName.ACTIVE))
if (addAriaPressed) {
this._element.setAttribute('aria-pressed',
!$(this._element).hasClass(ClassName.ACTIVE))
}

if (triggerChangeEvent) {
$(this._element).toggleClass(ClassName.ACTIVE)
Expand Down
18 changes: 18 additions & 0 deletions js/tests/unit/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,22 @@ $(function () {
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')
})

})

0 comments on commit 3f6e1fa

Please sign in to comment.