Close #21090 - Fix aria-pressed attribute for buttons in container with data-toggle='buttons'

2 files changed, 14 insertions, 3 deletions

diff --git a/js/src/button.js b/js/src/button.js
index 45e1424ff..97ccd4bf0 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -96,11 +96,11 @@ const Button = (($) => {
           input.focus()
         }
 
-      } else {
-        this._element.setAttribute('aria-pressed',
-          !$(this._element).hasClass(ClassName.ACTIVE))
       }
 
+      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 d87b57610..c67cea345 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -60,6 +60,17 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
+  QUnit.test('should toggle aria-pressed on buttons with container', function (assert) {
+    assert.expect(1)
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+        '<button id="btn1" class="btn btn-secondary" type="button">One</button>' +
+        '<button class="btn btn-secondary" type="button">Two</button>' +
+      '</div>'
+    $('#qunit-fixture').append(groupHTML)
+    $('#btn1').bootstrapButton('toggle')
+    assert.strictEqual($('#btn1').attr('aria-pressed'), 'true')
+  })
+
   QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')