diff options
| -rw-r--r-- | js/src/button.js | 8 | ||||
| -rw-r--r-- | js/tests/unit/button.js | 18 |
2 files changed, 24 insertions, 2 deletions
diff --git a/js/src/button.js b/js/src/button.js index 76c5cdd15..6295d0db0 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 c67cea345..abc04e10a 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 = '<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') + }) + }) |