diff --git a/js/src/button.js b/js/src/button.js index 76c5cdd15f88..6295d0db055b 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -66,6 +66,7 @@ const Button = (($) => { toggle() { let triggerChangeEvent = true + let addAriaPressed = true const rootElement = $(this._element).closest( Selector.DATA_TOGGLE )[0] @@ -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) diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index c67cea345b3e..abc04e10a90e 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -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 = '
' + + '' + + '' + + '
' + 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') + }) + })