Ensure button plugin sets/removes active class correctly on page load (#28952)

* Ensure correct active class is set on button toggles/checkboxes/radios on page load

Sanity check, ensures that the UI visually matches the actual values/states of controls. Also ensures that if any autocomplete/autofill happened, this is visually accounted for
by having the correct class set.

Includes unit tests (and `autocomplete` has been removed from these as it's no longer necessary)

* Remove now unnecessary autocomplete attribute

As the attribute was there to force/ensure that the visual presentation matched the state, and this is now taken care of programmatically, there's no need to unnecessarily suppress autocomplete...let them autocomplete if they want to...

js/tests/unit/button.js

@@ -100,13 +100,73 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
+  QUnit.test('should assign active class on page load to buttons with aria-pressed="true"', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="true">mdo</button>')
+    $btn.appendTo('#qunit-fixture')
+    $(window).trigger($.Event('load'))
+    setTimeout(function () {
+      assert.ok($btn.hasClass('active'), 'button with aria-pressed="true" has been given class active')
+      done()
+    }, 5)
+  })
+
+  QUnit.test('should assign active class on page load to button checkbox with checked attribute', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+      '<label class="btn btn-primary">' +
+      '<input type="checkbox" id="radio" checked> Checkbox' +
+      '</label>' +
+      '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+    var $btn = $group.children().eq(0)
+
+    $(window).trigger($.Event('load'))
+    setTimeout(function () {
+      assert.ok($btn.hasClass('active'), 'checked checkbox button has been given class active')
+      done()
+    }, 5)
+  })
+
+  QUnit.test('should remove active class on page load from buttons without aria-pressed="true"', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $btn = $('<button class="btn active" data-toggle="button" aria-pressed="false">mdo</button>')
+    $btn.appendTo('#qunit-fixture')
+    $(window).trigger($.Event('load'))
+    setTimeout(function () {
+      assert.ok(!$btn.hasClass('active'), 'button without aria-pressed="true" has had active class removed')
+      done()
+    }, 5)
+  })
+
+  QUnit.test('should remove active class on page load from button checkbox without checked attribute', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+      '<label class="btn btn-primary active">' +
+      '<input type="checkbox" id="radio"> Checkbox' +
+      '</label>' +
+      '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+    var $btn = $group.children().eq(0)
+
+    $(window).trigger($.Event('load'))
+    setTimeout(function () {
+      assert.ok(!$btn.hasClass('active'), 'unchecked checkbox button has had active class removed')
+      done()
+    }, 5)
+  })
+
   QUnit.test('should trigger input change event when toggled button has input field', function (assert) {
     assert.expect(1)
     var done = assert.async()
 
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<label class="btn btn-primary">' +
-      '<input type="radio" id="radio" autocomplete="off">Radio' +
+      '<input type="radio" id="radio">Radio' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -158,8 +218,8 @@ $(function () {
   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>' +
+      '<label class="btn btn-primary"><input type="checkbox"> Checkbox</label>' +
+      '<label class="btn btn-primary"><input type="radio" name="options"> Radio</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
 
@@ -177,7 +237,7 @@ $(function () {
     assert.expect(4)
     var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' +
       '<label class="btn btn-danger disabled">' +
-      '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled>' +
+      '<input type="checkbox" aria-disabled="true" disabled>' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -196,7 +256,7 @@ $(function () {
     assert.expect(4)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<label class="btn btn-danger">' +
-      '<input type="checkbox" autocomplete="off" disabled>' +
+      '<input type="checkbox" disabled>' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -215,7 +275,7 @@ $(function () {
     assert.expect(4)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<label class="btn">' +
-      '<input type="checkbox" autocomplete="off">' +
+      '<input type="checkbox">' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -234,7 +294,7 @@ $(function () {
     assert.expect(4)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<div class="btn">' +
-      '<input type="checkbox" autocomplete="off" aria-label="Check">' +
+      '<input type="checkbox" aria-label="Check">' +
       '</div>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -253,7 +313,7 @@ $(function () {
     assert.expect(4)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<label class="btn">' +
-      '<input type="checkbox" autocomplete="off">' +
+      '<input type="checkbox">' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -272,7 +332,7 @@ $(function () {
     assert.expect(2)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<label class="btn">' +
-      '<input type="hidden" autocomplete="off">' +
+      '<input type="hidden">' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')
@@ -289,7 +349,7 @@ $(function () {
     assert.expect(2)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
       '<label class="btn">' +
-      '<input type="text" autocomplete="off">' +
+      '<input type="text">' +
       '</label>' +
       '</div>'
     var $group = $(groupHTML).appendTo('#qunit-fixture')