From 496b0edbfd49ac12e69a9658234d2267e71c24b4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 11 Mar 2019 18:06:26 -0700
Subject: [PATCH 01/41] Cherry-pick from ysds

---
 scss/_button-group.scss   | 12 ++++++++++--
 scss/mixins/_buttons.scss |  8 ++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index d7220029ad18..e1e63505e4d4 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -48,7 +48,8 @@
     @include border-right-radius(0);
   }
 
-  > .btn:not(:first-child),
+  > .btn + .btn,
+  > .btn-group + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-left-radius(0);
   }
@@ -129,7 +130,8 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn:not(:first-child),
+  > .btn + .btn,
+  > .btn-group + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }
@@ -161,3 +163,9 @@
     }
   }
 }
+
+.btn-group-input {
+  position: absolute;
+  z-index: -1; // Put the input behind the label so it doesn't overlay button
+  opacity: 0;
+}
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index eee903f83ce5..1d5604a74e6c 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -16,7 +16,8 @@
   }
 
   &:focus,
-  &.focus {
+  &.focus,
+  .btn-group-input:focus ~ & {
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
       box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
@@ -39,6 +40,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
+  .btn-group-input:checked ~ &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -69,7 +71,8 @@
   }
 
   &:focus,
-  &.focus {
+  &.focus,
+  .btn-group-input:focus ~ & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
@@ -81,6 +84,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
+  .btn-group-input:checked ~ &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;

From 63473a04f4d4dd762fafcbf6df0dec557549be12 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 11 Mar 2019 18:30:46 -0700
Subject: [PATCH 02/41] Update docs to match new markup, drop JS

---
 js/src/button.js                            | 34 ---------------------
 scss/_button-group.scss                     | 18 ++---------
 site/content/docs/4.3/components/buttons.md | 32 ++++++++++---------
 3 files changed, 20 insertions(+), 64 deletions(-)

diff --git a/js/src/button.js b/js/src/button.js
index 6453137e4ecb..65f52b19f166 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -71,40 +71,6 @@ class Button {
       Selector.DATA_TOGGLE
     )
 
-    if (rootElement) {
-      const input = SelectorEngine.findOne(Selector.INPUT, this._element)
-
-      if (input) {
-        if (input.type === 'radio') {
-          if (input.checked &&
-            this._element.classList.contains(ClassName.ACTIVE)) {
-            triggerChangeEvent = false
-          } else {
-            const activeElement = SelectorEngine.findOne(Selector.ACTIVE, rootElement)
-
-            if (activeElement) {
-              activeElement.classList.remove(ClassName.ACTIVE)
-            }
-          }
-        }
-
-        if (triggerChangeEvent) {
-          if (input.hasAttribute('disabled') ||
-            rootElement.hasAttribute('disabled') ||
-            input.classList.contains('disabled') ||
-            rootElement.classList.contains('disabled')) {
-            return
-          }
-
-          input.checked = !this._element.classList.contains(ClassName.ACTIVE)
-          EventHandler.trigger(input, 'change')
-        }
-
-        input.focus()
-        addAriaPressed = false
-      }
-    }
-
     if (addAriaPressed) {
       this._element.setAttribute('aria-pressed',
         !this._element.classList.contains(ClassName.ACTIVE))
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index e1e63505e4d4..26d37c176dea 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -150,22 +150,8 @@
 // See https://github.com/twbs/bootstrap/pull/12794 and
 // https://github.com/twbs/bootstrap/pull/14559 for more information.
 
-.btn-group-toggle {
-  > .btn,
-  > .btn-group > .btn {
-    margin-bottom: 0; // Override default `<label>` value
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: absolute;
-      clip: rect(0, 0, 0, 0);
-      pointer-events: none;
-    }
-  }
-}
-
 .btn-group-input {
   position: absolute;
-  z-index: -1; // Put the input behind the label so it doesn't overlay button
-  opacity: 0;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
 }
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index de13ae5dfa35..de4f20c706e9 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -122,31 +122,35 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to
 
 ### Checkbox and radio buttons
 
-Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable their toggling behavior via JavaScript and add `.btn-group-toggle` to style the `<input>`s within your buttons. **Note that you can create single input-powered buttons or groups of them.**
+Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling.
 
 The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
 
 Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
 
 {{< example >}}
-<div class="btn-group-toggle" data-toggle="buttons">
-  <label class="btn btn-secondary active">
-    <input type="checkbox" checked autocomplete="off"> Checked
+<div class="btn-group">
+  <input type="checkbox" class="btn-group-input" id="btnGroupCheckSingle" checked>
+  <label class="btn btn-primary" for="btnGroupCheckSingle">
+    Checked button
   </label>
 </div>
 {{< /example >}}
 
 {{< example >}}
-<div class="btn-group btn-group-toggle" data-toggle="buttons">
-  <label class="btn btn-secondary active">
-    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
-  </label>
-  <label class="btn btn-secondary">
-    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
-  </label>
-  <label class="btn btn-secondary">
-    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
-  </label>
+<div class="btn-group">
+  <div class="btn-group">
+    <input type="checkbox" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
+    <label class="btn btn-primary" for="btnGroupRadio1">Radio button</label>
+  </div>
+  <div class="btn-group">
+    <input type="checkbox" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio2">
+    <label class="btn btn-primary" for="btnGroupRadio2">Radio button</label>
+  </div>
+  <div class="btn-group">
+    <input type="checkbox" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio3">
+    <label class="btn btn-primary" for="btnGroupRadio3">Radio button</label>
+  </div>
 </div>
 {{< /example >}}
 

From 047b231b25d76fc8ca53e2c3febeca7089ca95a0 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Tue, 12 Mar 2019 09:34:51 +0200
Subject: [PATCH 03/41] Update button.js

---
 js/src/button.js | 23 ++++-------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/js/src/button.js b/js/src/button.js
index 65f52b19f166..4a1c8401372c 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -30,9 +30,6 @@ const ClassName = {
 
 const Selector = {
   DATA_TOGGLE_CARROT: '[data-toggle^="button"]',
-  DATA_TOGGLE: '[data-toggle="buttons"]',
-  INPUT: 'input:not([type="hidden"])',
-  ACTIVE: '.active',
   BUTTON: '.btn'
 }
 
@@ -63,22 +60,10 @@ class Button {
   // Public
 
   toggle() {
-    let triggerChangeEvent = true
-    let addAriaPressed = true
-
-    const rootElement = SelectorEngine.closest(
-      this._element,
-      Selector.DATA_TOGGLE
-    )
-
-    if (addAriaPressed) {
-      this._element.setAttribute('aria-pressed',
-        !this._element.classList.contains(ClassName.ACTIVE))
-    }
-
-    if (triggerChangeEvent) {
-      this._element.classList.toggle(ClassName.ACTIVE)
-    }
+    this._element.setAttribute('aria-pressed',
+      !this._element.classList.contains(ClassName.ACTIVE))
+
+    this._element.classList.toggle(ClassName.ACTIVE)
   }
 
   dispose() {

From d6f73410915b91977f7ae22ed881d018f0d45c21 Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <fellows3@gmail.com>
Date: Tue, 12 Mar 2019 10:48:06 -0700
Subject: [PATCH 04/41] Update scss/_button-group.scss

Co-Authored-By: mdo <otto@github.com>
---
 scss/_button-group.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 26d37c176dea..624ea6c88de4 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -154,4 +154,9 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
+
+  ~ .btn {
+    margin-bottom: 0; // Override default `<label>` value
+  }
+}
 }

From 0acbe5a9e7fb95342e7cfdf20fe4ddbdac714a18 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 12 Mar 2019 10:48:42 -0700
Subject: [PATCH 05/41] Fix input types

---
 site/content/docs/4.3/components/buttons.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index de4f20c706e9..3ad9d854ced9 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -140,15 +140,15 @@ Note that pre-checked buttons require you to manually add the `.active` class to
 {{< example >}}
 <div class="btn-group">
   <div class="btn-group">
-    <input type="checkbox" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
+    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
     <label class="btn btn-primary" for="btnGroupRadio1">Radio button</label>
   </div>
   <div class="btn-group">
-    <input type="checkbox" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio2">
+    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio2">
     <label class="btn btn-primary" for="btnGroupRadio2">Radio button</label>
   </div>
   <div class="btn-group">
-    <input type="checkbox" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio3">
+    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio3">
     <label class="btn btn-primary" for="btnGroupRadio3">Radio button</label>
   </div>
 </div>

From c8036f0aa0cecce4759d68ae734847c29796b707 Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <fellows3@gmail.com>
Date: Wed, 13 Mar 2019 16:50:29 +0100
Subject: [PATCH 06/41] Update scss/_button-group.scss

Co-Authored-By: MartijnCuppens <martijn.cuppens@gmail.com>
---
 scss/_button-group.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 624ea6c88de4..0065d072014a 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -159,4 +159,3 @@
     margin-bottom: 0; // Override default `<label>` value
   }
 }
-}

From cbd79ea2b45828c27fca024ec3475a332d31fa88 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 12:47:29 +0100
Subject: [PATCH 07/41] Remove unit tests for faked radio button/checkbox
 buttons

---
 js/tests/unit/button.js | 119 ----------------------------------------
 1 file changed, 119 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index d351cc770555..e978e61e1eae 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -86,125 +86,6 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
-  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' +
-      '</label>' +
-      '</div>'
-    var $group = $(groupHTML).appendTo('#qunit-fixture')
-
-    $group.find('input').on('change', function (e) {
-      e.preventDefault()
-      assert.ok(true, 'change event fired')
-      done()
-    })
-
-    $group.find('label').trigger('click')
-  })
-
-  QUnit.test('should check for closest matching toggle', function (assert) {
-    assert.expect(12)
-    var groupHTML =
-      '<div class="btn-group" data-toggle="buttons">' +
-      '  <label class="btn btn-primary active">' +
-      '    <input type="radio" name="options" id="option1" checked="true"> Option 1' +
-      '  </label>' +
-      '  <label class="btn btn-primary">' +
-      '    <input type="radio" name="options" id="option2"> Option 2' +
-      '  </label>' +
-      '  <label class="btn btn-primary">' +
-      '    <input type="radio" name="options" id="option3"> Option 3' +
-      '  </label>' +
-      '</div>'
-
-    var $group = $(groupHTML).appendTo('#qunit-fixture')
-
-    var $btn1 = $group.children().eq(0)
-    var $btn2 = $group.children().eq(1)
-    var inputBtn2 = $btn2.find('input')[0]
-
-    assert.ok($btn1.hasClass('active'), 'btn1 has active class')
-    assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
-    assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
-    assert.ok(!inputBtn2.checked, 'btn2 is not checked')
-
-    inputBtn2.dispatchEvent(new Event('click'))
-
-    assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
-    assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
-    assert.ok($btn2.hasClass('active'), 'btn2 has active class')
-    assert.ok(inputBtn2.checked, 'btn2 is checked')
-
-    inputBtn2.dispatchEvent(new Event('click')) // clicking an already checked radio should not un-check it
-
-    assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
-    assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
-    assert.ok($btn2.hasClass('active'), 'btn2 has active class')
-    assert.ok(inputBtn2.checked, 'btn2 is checked')
-  })
-
-  QUnit.test('should only toggle selectable inputs', function (assert) {
-    assert.expect(6)
-    var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
-      '<label class="btn btn-primary active">' +
-      '<input type="hidden" name="option1" id="option1-default" value="false">' +
-      '<input type="checkbox" name="option1" id="option1" checked="true"> Option 1' +
-      '</label>' +
-      '</div>'
-    var $group = $(groupHTML).appendTo('#qunit-fixture')
-
-    var $btn = $group.children().eq(0)
-    var $hidden = $btn.find('input#option1-default')
-    var $cb = $btn.find('input#option1')
-
-    assert.ok($btn.hasClass('active'), 'btn has active class')
-    assert.ok($cb.prop('checked'), 'btn is checked')
-    assert.ok(!$hidden.prop('checked'), 'hidden is not checked')
-    $btn.trigger('click')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    assert.ok(!$cb.prop('checked'), 'btn is not checked')
-    assert.ok(!$hidden.prop('checked'), 'hidden is not checked') // should not be changed
-  })
-
-  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')
-  })
-
-  QUnit.test('should handle disabled attribute on non-button elements', function (assert) {
-    assert.expect(2)
-    var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' +
-      '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' +
-      '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' +
-      '</label>' +
-      '</div>'
-    var $group = $(groupHTML).appendTo('#qunit-fixture')
-
-    var $btn = $group.children().eq(0)
-    var $input = $btn.children().eq(0)
-
-    $btn.trigger('click')
-    assert.ok($btn.is(':not(.active)'), 'button did not become active')
-    assert.ok(!$input.is(':checked'), 'checkbox did not get checked')
-  })
-
   QUnit.test('dispose should remove data and the element', function (assert) {
     assert.expect(2)
 

From 7c862c79187caeab2ecac9560ff6e6105ad03e32 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 13:17:41 +0100
Subject: [PATCH 08/41] Add unit test for focus class handling

---
 js/tests/unit/button.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index e978e61e1eae..617fdb8980c6 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -86,6 +86,17 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
+  QUnit.test('should set focus class when focused, and remove it when it loses focus', function (assert) {
+    assert.expect(3)
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    $btn.appendTo('#qunit-fixture')
+    assert.ok(!$btn.hasClass('focus'), 'initial btn doesn\'t have focus class')
+    $btn[0].focus()
+    assert.ok($btn.hasClass('focus'), 'after focusing, btn has focus class')
+    $btn[0].blur()
+    assert.ok(!$btn.hasClass('focus'), 'after blurring, btn doesn\'t have focus class')
+  })
+
   QUnit.test('dispose should remove data and the element', function (assert) {
     assert.expect(2)
 

From fc846381fde7591321aae86912578486e3c78c3f Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 13:24:52 +0100
Subject: [PATCH 09/41] Initial update of button documentation to match new
 reality

As we now just use real radio/checkbox, there's no weird "only updated on click" clause. And having a pre-checked button is a case of just checking the input.
---
 site/content/docs/4.3/components/buttons.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 3ad9d854ced9..5f978382d731 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -124,9 +124,7 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to
 
 Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling.
 
-The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
-
-Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
+Note that pre-checked buttons require you to manually add the `checked` attribute to the `<input>`.
 
 {{< example >}}
 <div class="btn-group">

From 2f2dcbdc68b46c2a9bf7cbfed16ced656f0aaa66 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 14:15:30 +0100
Subject: [PATCH 10/41] Add handling of disabled buttons

---
 js/src/button.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/src/button.js b/js/src/button.js
index 4a1c8401372c..5a835b712753 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -60,10 +60,12 @@ class Button {
   // Public
 
   toggle() {
-    this._element.setAttribute('aria-pressed',
-      !this._element.classList.contains(ClassName.ACTIVE))
+    if (!(this._element.hasAttribute('disabled') || this._element.classList.contains('disabled'))) {
+      this._element.setAttribute('aria-pressed',
+        !this._element.classList.contains(ClassName.ACTIVE))
 
-    this._element.classList.toggle(ClassName.ACTIVE)
+      this._element.classList.toggle(ClassName.ACTIVE)
+    }
   }
 
   dispose() {

From f17b00a6442bb356c3a08b49aa500e704185ed16 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 14:15:54 +0100
Subject: [PATCH 11/41] Unit test for disabled buttons and for btn lacking
 initial aria-pressed

---
 js/tests/unit/button.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 617fdb8980c6..fbc2ab684e8a 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -63,6 +63,29 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
+  QUnit.test('should add aria-pressed and set to true if original button didn\'t have it', function (assert) {
+    assert.expect(1)
+    var $btn = $('<button class="btn" data-toggle="button">redux</button>')
+    $btn.bootstrapButton('toggle')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn has aria-pressed and it\'s set to true')
+  })
+
+  QUnit.test('should not toggle aria-pressed on buttons with disabled class', function (assert) {
+    assert.expect(2)
+    var $btn = $('<button class="btn disabled" data-toggle="button" aria-pressed="false">redux</button>')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $btn.bootstrapButton('toggle')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
+  })
+
+  QUnit.test('should not toggle aria-pressed on buttons that are disabled', function (assert) {
+    assert.expect(2)
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false" disabled>redux</button>')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $btn.bootstrapButton('toggle')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
+  })
+
   QUnit.test('should toggle aria-pressed on buttons with container', function (assert) {
     assert.expect(1)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +

From 6863eda8b7d9e7f0788bdbc8b976bdcd4389329e Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 14:20:54 +0100
Subject: [PATCH 12/41] Remove obsolete mention of super-powered/JS
 functionality for button groups

---
 site/content/docs/4.3/components/button-group.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index b4c8543fc82e..d9d037649b19 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -1,14 +1,14 @@
 ---
 layout: docs
 title: Button group
-description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
+description: Group a series of buttons together on a single line with the button group.
 group: components
 toc: true
 ---
 
 ## Basic example
 
-Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{< docsref "/components/buttons#button-plugin" >}}).
+Wrap a series of buttons with `.btn` in `.btn-group`.
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic example">

From c55ddbba36125039372d4e7cc64e6976306ee320 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 14:32:37 +0100
Subject: [PATCH 13/41] Reorganise/reword button documentation

- Move the checkbox/radio button section out of the "Button plugin" part, as it now does not rely on the plugin anymore.
- Reword the intro to the checkbox/radio button section, as it's far more focused and specific now, rather than "just add styles to other elements to make them like a checkbox/radio".
- Reword the intro to the button plugin section, as it's now purely about providing toggles (incidentally...we may want to consider renaming the plugin itself to "toggle plugin?")
---
 site/content/docs/4.3/components/buttons.md | 32 ++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 5f978382d731..f9b3021523c4 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -106,23 +106,9 @@ Disabled buttons using the `<a>` element behave a bit different:
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
 {{< /callout >}}
 
-## Button plugin
-
-Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
-
-### Toggle states
-
-Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
-
-{{< example >}}
-<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
-  Single toggle
-</button>
-{{< /example >}}
-
-### Checkbox and radio buttons
+## Checkbox and radio buttons
 
-Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling.
+Bootstrap lets you create checkboxes and radio buttons that look like regular buttons.
 
 Note that pre-checked buttons require you to manually add the `checked` attribute to the `<input>`.
 
@@ -152,6 +138,20 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
 </div>
 {{< /example >}}
 
+## Button plugin
+
+The button plugin allows you to create simple on/off toggle buttons.
+
+### Toggle states
+
+Add `data-toggle="button"` to toggle a button's `active` state and `aria-pressed` attribute. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
+
+{{< example >}}
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+  Single toggle
+</button>
+{{< /example >}}
+
 ### Methods
 
 You can create a button instance with the button constructor, for example:

From 50973596c943f4288aa7553325c631c75a4ed680 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 14:39:29 +0100
Subject: [PATCH 14/41] Remove obsolete unit test

This is not documented behavior. This structure makes no sense if the button plugin now just acts as a way to turn a button into a toggle and nothing more. also, this test was flawed as it toggled the toggle function instead of simulating a click...
---
 js/tests/unit/button.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index fbc2ab684e8a..e34ee88210fb 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -86,17 +86,6 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
   })
 
-  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>')

From fb146c762a114b329ec14a490907a029fcb000c8 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 16:03:03 +0100
Subject: [PATCH 15/41] Simplify button.js selector and add comment for click
 behavior

- As we're now just supporting `.btn` elements with `[data-toggle="button"]`, and none of those faked button groups etc, the selector can be simplified (no more carrot ?!).
- Added a comment (mainly for myself?) to clarify why we're still trying to find the closest button to the event.target - for cases like `<button ...><i>foo</i></button>` where otherwise the `event.target` is the `<i>` and so wouldn't work/match the class check. This is due to the way the whole EventHandler/delegation work ... if the events were tied directly to the elements, rather than delegated, would just need to handle the `this` and be done with it...
---
 js/src/button.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/js/src/button.js b/js/src/button.js
index 5a835b712753..a113babc6e59 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -29,8 +29,7 @@ const ClassName = {
 }
 
 const Selector = {
-  DATA_TOGGLE_CARROT: '[data-toggle^="button"]',
-  BUTTON: '.btn'
+  BUTTON: '.btn[data-toggle="button"]'
 }
 
 const Event = {
@@ -100,11 +99,10 @@ class Button {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, event => {
-  event.preventDefault()
-
+EventHandler.on(document, Event.CLICK_DATA_API, Selector.BUTTON, event => {
   let button = event.target
   if (!button.classList.contains(ClassName.BUTTON)) {
+    // the event.target is a child element of the actual toggle button
     button = SelectorEngine.closest(button, Selector.BUTTON)
   }
 
@@ -117,14 +115,12 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, eve
   data.toggle()
 })
 
-EventHandler.on(document, Event.FOCUS_DATA_API, Selector.DATA_TOGGLE_CARROT, event => {
-  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
-  button.classList.add(ClassName.FOCUS)
+EventHandler.on(document, Event.FOCUS_DATA_API, Selector.BUTTON, event => {
+  event.target.classList.add(ClassName.FOCUS)
 })
 
-EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, event => {
-  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
-  button.classList.remove(ClassName.FOCUS)
+EventHandler.on(document, Event.BLUR_DATA_API, Selector.BUTTON, event => {
+  event.target.classList.remove(ClassName.FOCUS)
 })
 
 /**

From 4d2d96a05b0deb5d56570b840fe29a3b5b93b283 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 16:03:47 +0100
Subject: [PATCH 16/41] Use proper simulated click in one test, move related
 unit tests closer together

---
 js/tests/unit/button.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index e34ee88210fb..86a81ac58ce8 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -51,10 +51,22 @@ $(function () {
       .append($inner)
       .appendTo('#qunit-fixture')
     assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $inner.trigger('click')
+    $inner[0].click()
     assert.ok($btn.hasClass('active'), 'btn has class active')
   })
 
+  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>')
+    var $inner = $('<i/>')
+    $btn
+      .append($inner)
+      .appendTo('#qunit-fixture')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $inner[0].click()
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+  })
+
   QUnit.test('should toggle aria-pressed', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
@@ -86,18 +98,6 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
   })
 
-  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>')
-    var $inner = $('<i/>')
-    $btn
-      .append($inner)
-      .appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
-    $inner.trigger('click')
-    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
-  })
-
   QUnit.test('should set focus class when focused, and remove it when it loses focus', function (assert) {
     assert.expect(3)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')

From 787a7480400250cb61f267d7a82bc6fdc56f486e Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 16:41:08 +0100
Subject: [PATCH 17/41] Redo button visual test

- remove the now unnecessary test for faked checkbox/radio button groups, aas the plugin now only handles toggles
- expand the text of the single toggle to make it clear what's expected
- add a disabled toggle that shouldn't be pressable
- add a button that initially is missing `aria-pressed`
---
 js/tests/visual/button.html | 37 ++++++++-----------------------------
 1 file changed, 8 insertions(+), 29 deletions(-)

diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index c16ba9a9c930..42ff8afb2693 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -10,38 +10,17 @@
     <div class="container">
       <h1>Button <small>Bootstrap Visual Test</small></h1>
 
-      <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
-        Single toggle
+      <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
+        Single toggle should visually appear active when pressed and have <code>aria-pressed="true"</code>
       </button>
 
-      <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
-      <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p>
-
-      <div class="btn-group" data-toggle="buttons">
-        <label class="btn btn-primary active">
-          <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
-        </label>
-        <label class="btn btn-primary">
-          <input type="checkbox" autocomplete="off"> Checkbox 2
-        </label>
-        <label class="btn btn-primary">
-          <input type="checkbox" autocomplete="off"> Checkbox 3
-        </label>
-      </div>
-
-      <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
+      <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" disabled>
+        Disabled toggle shouldn't be pressable at all
+      </button>
 
-      <div class="btn-group" data-toggle="buttons">
-        <label class="btn btn-primary active">
-          <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
-        </label>
-        <label class="btn btn-primary">
-          <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
-        </label>
-        <label class="btn btn-primary">
-          <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
-        </label>
-      </div>
+      <button type="button" class="btn btn-primary" data-toggle="button">
+        Toggle that's missing <code>aria-pressed</code> - after toggling, the attribute should be present
+      </button>
     </div>
 
     <script src="../../dist/util.js"></script>

From 420257ed2b10bfb0d66abf89d6267f5b46e84fa9 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 17:24:03 +0100
Subject: [PATCH 18/41] Change unit tests to test actual simulated click

This not only checks that the toggle function itself executes correctly, but that the event listener/handling is working as it should
---
 js/tests/unit/button.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 86a81ac58ce8..01b9afb36eff 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -38,8 +38,9 @@ $(function () {
   QUnit.test('should toggle active', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
+    $btn.appendTo('#qunit-fixture')
     assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $btn.bootstrapButton('toggle')
+    $btn[0].click()
     assert.ok($btn.hasClass('active'), 'btn has class active')
   })
 
@@ -70,31 +71,35 @@ $(function () {
   QUnit.test('should toggle aria-pressed', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    $btn.appendTo('#qunit-fixture')
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
-    $btn.bootstrapButton('toggle')
+    $btn[0].click()
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
   QUnit.test('should add aria-pressed and set to true if original button didn\'t have it', function (assert) {
     assert.expect(1)
     var $btn = $('<button class="btn" data-toggle="button">redux</button>')
-    $btn.bootstrapButton('toggle')
+    $btn.appendTo('#qunit-fixture')
+    $btn[0].click()
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn has aria-pressed and it\'s set to true')
   })
 
   QUnit.test('should not toggle aria-pressed on buttons with disabled class', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn disabled" data-toggle="button" aria-pressed="false">redux</button>')
+    $btn.appendTo('#qunit-fixture')
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
-    $btn.bootstrapButton('toggle')
+    $btn[0].click()
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
   })
 
   QUnit.test('should not toggle aria-pressed on buttons that are disabled', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false" disabled>redux</button>')
+    $btn.appendTo('#qunit-fixture')
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
-    $btn.bootstrapButton('toggle')
+    $btn[0].click()
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
   })
 

From 09b1fc9856b6072f7c86f78102bc69e4f1ce88be Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 18:57:57 +0100
Subject: [PATCH 19/41] Reintroduce one unit test for bootstrapButton('toggle')

- needed for 100% statement code coverage of button.js
---
 js/tests/unit/button.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 01b9afb36eff..6aafb937c7c8 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -35,6 +35,14 @@ $(function () {
     assert.strictEqual($button[0], $el[0], 'collection contains element')
   })
 
+  QUnit.test('should toggle active (testing using bootStrapButton(\'toggle\') rather than click())', function (assert) {
+    assert.expect(2)
+    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
+    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
+    $btn.bootstrapButton('toggle')
+    assert.ok($btn.hasClass('active'), 'btn has class active')
+  })
+
   QUnit.test('should toggle active', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')

From 7590df00751a765393c9fbf142262deb3b6ae290 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 19:20:33 +0100
Subject: [PATCH 20/41] Remove unnecessary autocomplete="off"

`<button>` elements aren't autocompleted by browsers (as they don't have a particular state/value by themselves, we're
faking/adding it ourselves with `aria-pressed`), so these explicit `autocomplete="off"` attributes do nothing
---
 site/content/docs/4.3/components/buttons.md  | 2 +-
 site/content/docs/4.3/components/progress.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index f9b3021523c4..90b67c655d82 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -147,7 +147,7 @@ The button plugin allows you to create simple on/off toggle buttons.
 Add `data-toggle="button"` to toggle a button's `active` state and `aria-pressed` attribute. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
 
 {{< example >}}
-<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
   Single toggle
 </button>
 {{< /example >}}
diff --git a/site/content/docs/4.3/components/progress.md b/site/content/docs/4.3/components/progress.md
index c41aea4acdd2..8ff5b27ebc58 100644
--- a/site/content/docs/4.3/components/progress.md
+++ b/site/content/docs/4.3/components/progress.md
@@ -127,7 +127,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   <div class="progress">
     <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
   </div>
-  <button type="button" class="btn btn-secondary mt-3" data-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off">
+  <button type="button" class="btn btn-secondary mt-3" data-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false">
     Toggle animation
   </button>
 </div>

From 612941380dc2ee372684d0b9009ad92823bf5b2d Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 19:54:54 +0100
Subject: [PATCH 21/41] Tweak focus/blur test

IE11 doesn't just let you blur something without then focusing something else. In real-world situation, this would be the case - you'd move focus away and onto something different (even just the main document), so testing this way is closer to reality than artificially firing blur()
---
 js/tests/unit/button.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 6aafb937c7c8..9ac756176a96 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -113,13 +113,15 @@ $(function () {
 
   QUnit.test('should set focus class when focused, and remove it when it loses focus', function (assert) {
     assert.expect(3)
-    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
-    $btn.appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('focus'), 'initial btn doesn\'t have focus class')
-    $btn[0].focus()
-    assert.ok($btn.hasClass('focus'), 'after focusing, btn has focus class')
-    $btn[0].blur()
-    assert.ok(!$btn.hasClass('focus'), 'after blurring, btn doesn\'t have focus class')
+    var $btn1 = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    var $btn2 = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    $btn1.appendTo('#qunit-fixture')
+    $btn2.appendTo('#qunit-fixture')
+    assert.ok(!$btn1.hasClass('focus'), 'initial btn doesn\'t have focus class')
+    $btn1[0].focus()
+    assert.ok($btn1.hasClass('focus'), 'after focusing, btn has focus class')
+    $btn2[0].focus() // rather than $btn[0].blur() as IE11 doesn't let you just blur something without focusing something else
+    assert.ok(!$btn1.hasClass('focus'), 'after other button receives focus, btn doesn\'t have focus class')
   })
 
   QUnit.test('dispose should remove data and the element', function (assert) {

From 6d530ada15a28c225e2898c4252cfb6885cc9217 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 20:06:25 +0100
Subject: [PATCH 22/41] Expand button group description

Also mention vertical column/stack
---
 site/content/docs/4.3/components/button-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index d9d037649b19..d1b45b6ecf77 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Button group
-description: Group a series of buttons together on a single line with the button group.
+description: Group a series of buttons together on a single line or stack them in a vertical column.
 group: components
 toc: true
 ---

From a8f4aa49afa0d5b4dfecdb380a627c60168e980e Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 21:27:15 +0100
Subject: [PATCH 23/41] Further tweak to unit test

turns out IE11 doesn't always/properly fire focus/blur event handlers when elements triggered purely programmatically with `focus()` / `blur()`.
---
 js/tests/unit/button.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 9ac756176a96..d987bdad2e3f 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -118,9 +118,9 @@ $(function () {
     $btn1.appendTo('#qunit-fixture')
     $btn2.appendTo('#qunit-fixture')
     assert.ok(!$btn1.hasClass('focus'), 'initial btn doesn\'t have focus class')
-    $btn1[0].focus()
+    $btn1.trigger('focus') // use trigger to work around oddity in IE11 which doesn't fire focus/blur handlers consistently when triggered programmatically
     assert.ok($btn1.hasClass('focus'), 'after focusing, btn has focus class')
-    $btn2[0].focus() // rather than $btn[0].blur() as IE11 doesn't let you just blur something without focusing something else
+    $btn2.trigger('focus')
     assert.ok(!$btn1.hasClass('focus'), 'after other button receives focus, btn doesn\'t have focus class')
   })
 

From 57cdbb6459d8b1e7de5e3ca736ca56883325e892 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 21:55:08 +0100
Subject: [PATCH 24/41] Reintroduce element checks for focus/blur, tweak unit
 test again

IE11 still failing inexplicably in unit test but not in real-world usage.
---
 js/src/button.js        | 12 ++++++++++--
 js/tests/unit/button.js | 16 +++++++---------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/js/src/button.js b/js/src/button.js
index 58004d846864..c08780d3b308 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -116,11 +116,19 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.BUTTON, event => {
 })
 
 EventHandler.on(document, Event.FOCUS_DATA_API, Selector.BUTTON, event => {
-  event.target.classList.add(ClassName.FOCUS)
+  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
+
+  if (button) {
+    button.classList.add(ClassName.FOCUS)
+  }
 })
 
 EventHandler.on(document, Event.BLUR_DATA_API, Selector.BUTTON, event => {
-  event.target.classList.remove(ClassName.FOCUS)
+  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
+
+  if (button) {
+    button.classList.remove(ClassName.FOCUS)
+  }
 })
 
 /**
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index d987bdad2e3f..a3f999ecc8fc 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -113,15 +113,13 @@ $(function () {
 
   QUnit.test('should set focus class when focused, and remove it when it loses focus', function (assert) {
     assert.expect(3)
-    var $btn1 = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
-    var $btn2 = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
-    $btn1.appendTo('#qunit-fixture')
-    $btn2.appendTo('#qunit-fixture')
-    assert.ok(!$btn1.hasClass('focus'), 'initial btn doesn\'t have focus class')
-    $btn1.trigger('focus') // use trigger to work around oddity in IE11 which doesn't fire focus/blur handlers consistently when triggered programmatically
-    assert.ok($btn1.hasClass('focus'), 'after focusing, btn has focus class')
-    $btn2.trigger('focus')
-    assert.ok(!$btn1.hasClass('focus'), 'after other button receives focus, btn doesn\'t have focus class')
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    $btn.appendTo('#qunit-fixture')
+    assert.ok(!$btn.hasClass('focus'), 'initial btn doesn\'t have focus class')
+    $btn[0].focus()
+    assert.ok($btn.hasClass('focus'), 'after focusing, btn has focus class')
+    $btn[0].blur()
+    assert.ok(!$btn.hasClass('focus'), 'after other button receives focus, btn doesn\'t have focus class')
   })
 
   QUnit.test('dispose should remove data and the element', function (assert) {

From 5c004ac7458fa749325387af735b4f9e5cbc75d8 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 22:17:17 +0100
Subject: [PATCH 25/41] Remove bespoke focus styling

Sudden realisation that because we now only really support properly focusable elements for toggles, they would already get the standard `:focus` anyway. No need for custom addition of `.focus` programmatically (which is also causing issues with the unit testing in IE11 as it doesn't fire the focus/blur handlers correctly when triggered programmatically, it seems)
---
 js/src/button.js        | 23 ++---------------------
 js/tests/unit/button.js | 11 -----------
 2 files changed, 2 insertions(+), 32 deletions(-)

diff --git a/js/src/button.js b/js/src/button.js
index c08780d3b308..ff6b16af4d78 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -24,8 +24,7 @@ const DATA_API_KEY = '.data-api'
 
 const ClassName = {
   ACTIVE: 'active',
-  BUTTON: 'btn',
-  FOCUS: 'focus'
+  BUTTON: 'btn'
 }
 
 const Selector = {
@@ -33,9 +32,7 @@ const Selector = {
 }
 
 const Event = {
-  CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`,
-  FOCUS_DATA_API: `focus${EVENT_KEY}${DATA_API_KEY}`,
-  BLUR_DATA_API: `blur${EVENT_KEY}${DATA_API_KEY}`
+  CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
 }
 
 /**
@@ -115,22 +112,6 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.BUTTON, event => {
   data.toggle()
 })
 
-EventHandler.on(document, Event.FOCUS_DATA_API, Selector.BUTTON, event => {
-  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
-
-  if (button) {
-    button.classList.add(ClassName.FOCUS)
-  }
-})
-
-EventHandler.on(document, Event.BLUR_DATA_API, Selector.BUTTON, event => {
-  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
-
-  if (button) {
-    button.classList.remove(ClassName.FOCUS)
-  }
-})
-
 /**
  * ------------------------------------------------------------------------
  * jQuery
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index a3f999ecc8fc..ed7ac7f9ae3d 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -111,17 +111,6 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
   })
 
-  QUnit.test('should set focus class when focused, and remove it when it loses focus', function (assert) {
-    assert.expect(3)
-    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
-    $btn.appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('focus'), 'initial btn doesn\'t have focus class')
-    $btn[0].focus()
-    assert.ok($btn.hasClass('focus'), 'after focusing, btn has focus class')
-    $btn[0].blur()
-    assert.ok(!$btn.hasClass('focus'), 'after other button receives focus, btn doesn\'t have focus class')
-  })
-
   QUnit.test('dispose should remove data and the element', function (assert) {
     assert.expect(2)
 

From 038c1745b950f09d3c8a2237e6f17d1d6e2b57c3 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 23:14:27 +0100
Subject: [PATCH 26/41] Expand automated and manual tests

- for automated tests, make sure we check faked buttons (using `<div>` and `<a href="#">`) as well - there's generally no reason for authors to use these over actual `<button>` elements, but hey...some will, and our plugin should handle this
- added these fake buttons to the visual/manual unit test as well, with custom keyboard handling and a bit more explanation and styling
---
 js/tests/unit/button.js     | 56 +++++++++++++++++++++++++++-------
 js/tests/visual/button.html | 60 +++++++++++++++++++++++++++++++------
 2 files changed, 97 insertions(+), 19 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index ed7ac7f9ae3d..ee8fa437529d 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -43,7 +43,7 @@ $(function () {
     assert.ok($btn.hasClass('active'), 'btn has class active')
   })
 
-  QUnit.test('should toggle active', function (assert) {
+  QUnit.test('should toggle active for <button>', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
     $btn.appendTo('#qunit-fixture')
@@ -52,6 +52,51 @@ $(function () {
     assert.ok($btn.hasClass('active'), 'btn has class active')
   })
 
+  QUnit.test('should toggle aria-pressed for <button>', function (assert) {
+    assert.expect(2)
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    $btn.appendTo('#qunit-fixture')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $btn[0].click()
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+  })
+
+  QUnit.test('should toggle active for <div> faked button', function (assert) {
+    assert.expect(2)
+    var $btn = $('<div tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</div>')
+    $btn.appendTo('#qunit-fixture')
+    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
+    $btn[0].click() // in real-world use, authors will need to add custom keyboard handling to actually fire the click() when pressing ENTER/SPACE
+    assert.ok($btn.hasClass('active'), 'btn has class active')
+  })
+
+  QUnit.test('should toggle aria-pressed for <div> faked button', function (assert) {
+    assert.expect(2)
+    var $btn = $('<div tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</div>')
+    $btn.appendTo('#qunit-fixture')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $btn[0].click() // in real-world use, authors will need to add custom keyboard handling to actually fire the click() when pressing ENTER/SPACE
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+  })
+
+  QUnit.test('should toggle active for <a href="#"> faked button', function (assert) {
+    assert.expect(2)
+    var $btn = $('<a href="#" tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</a>')
+    $btn.appendTo('#qunit-fixture')
+    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
+    $btn[0].click()
+    assert.ok($btn.hasClass('active'), 'btn has class active')
+  })
+
+  QUnit.test('should toggle aria-pressed for <a href="#"> faked button', function (assert) {
+    assert.expect(2)
+    var $btn = $('<a tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</a>')
+    $btn.appendTo('#qunit-fixture')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $btn[0].click()
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+  })
+
   QUnit.test('should toggle active when btn children are clicked', function (assert) {
     assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
@@ -76,15 +121,6 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
-  QUnit.test('should toggle aria-pressed', function (assert) {
-    assert.expect(2)
-    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
-    $btn.appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
-    $btn[0].click()
-    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
-  })
-
   QUnit.test('should add aria-pressed and set to true if original button didn\'t have it', function (assert) {
     assert.expect(1)
     var $btn = $('<button class="btn" data-toggle="button">redux</button>')
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index cdacb478f015..53bffb3313d0 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -5,27 +5,69 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
     <title>Button</title>
+    <style>
+      div.container > div { margin-bottom: 1em; }
+    </style>
   </head>
   <body>
     <div class="container">
       <h1>Button <small>Bootstrap Visual Test</small></h1>
 
-      <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
-        Single toggle should visually appear active when pressed and have <code>aria-pressed="true"</code>
-      </button>
+      <p>Verify that these buttons (except the disabled one) show <code>:focus</code> styling when receiving focus, and that they can be toggled correctly.</p>
 
-      <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" disabled>
-        Disabled toggle shouldn't be pressable at all
-      </button>
+      <div>
+        <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
+          Single toggle should visually appear active when pressed and have <code>aria-pressed="true"</code>
+        </button>
+      </div>
 
-      <button type="button" class="btn btn-primary" data-toggle="button">
-        Toggle that's missing <code>aria-pressed</code> - after toggling, the attribute should be present
-      </button>
+      <div>
+        <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" disabled>
+          Disabled toggle shouldn't be focusable nor pressable at all
+        </button>
+      </div>
+
+      <div>
+        <button type="button" class="btn btn-primary" data-toggle="button">
+          Toggle that's missing <code>aria-pressed</code> - after toggling, the attribute should be present
+        </button>
+      </div>
+
+      <div>
+        <a href="#" tabindex="0" id="fake1" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
+          Faked button using <code>&lt;a href="#"&gt;</code>
+        </a>
+      </div>
+
+      <div>
+        <div tabindex="0" id="fake2" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
+          Faked button using <code>&lt;div&gt;</code>
+        </div>
+      </div>
     </div>
 
     <script src="../../dist/dom/event-handler.js"></script>
     <script src="../../dist/dom/selector-engine.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/button.js"></script>
+    <script>
+    /* Quick and dirty extra keyboard handling for fake buttons */
+    var fakes = document.querySelectorAll('div[role="button"]');
+    for(var i = 0; i<fakes.length; i++) {
+      fakes[i].addEventListener('keyup', function (e) {
+        if ((e.keyCode == 13) || (e.keyCode == 32)) {
+          this.click();
+        }
+      })
+    }
+    var fakes = document.querySelectorAll('a[role="button"]');
+    for(var i = 0; i<fakes.length; i++) {
+      fakes[i].addEventListener('keyup', function (e) {
+        if (e.keyCode == 32) {
+          this.click();
+        }
+      })
+    }
+    </script>
   </body>
 </html>

From 03939dbd30873b987336aa68ea996510478ffe3f Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 23:34:57 +0100
Subject: [PATCH 27/41] Expand checkbox/radio button explanation

Explicitly mention that the structure needs to be just so, because of the sibling selector used
---
 site/content/docs/4.3/components/buttons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 90b67c655d82..961d6d26cf5a 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -108,7 +108,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
 
 ## Checkbox and radio buttons
 
-Bootstrap lets you create checkboxes and radio buttons that look like regular buttons.
+Bootstrap lets you create checkboxes and radio buttons that look like regular buttons. However, they do require a fairly specific markup structure (see below) to ensure that the styles are all applied correctly as they rely on CSS sibling selectors.
 
 Note that pre-checked buttons require you to manually add the `checked` attribute to the `<input>`.
 

From 687f57938fffdb569cc8cb5444a39daee479dbea Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 6 Jun 2019 23:43:17 +0100
Subject: [PATCH 28/41] Add automated and visual test for disabled <a href=#">
 faked button

---
 js/tests/unit/button.js     | 11 +++++++++++
 js/tests/visual/button.html |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index ee8fa437529d..dfdcfffa599f 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -147,6 +147,17 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
   })
 
+  QUnit.test('should not toggle active nor aria-pressed for <a href="#"> faked button with disabled class', function (assert) {
+    assert.expect(4)
+    var $btn = $('<a tabindex="0" role="button" class="btn disabled" data-toggle="button" aria-pressed="false">faker</a>')
+    $btn.appendTo('#qunit-fixture')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
+    $btn[0].click()
+    assert.ok(!$btn.hasClass('active'), 'after click btn still does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'after click btn aria-pressed state is still false')
+  })
+
   QUnit.test('dispose should remove data and the element', function (assert) {
     assert.expect(2)
 
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index 53bffb3313d0..7fb2cb2eeb80 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -39,6 +39,12 @@ <h1>Button <small>Bootstrap Visual Test</small></h1>
         </a>
       </div>
 
+      <div>
+        <a href="#" tabindex="-1" id="fake1" role="button" class="btn btn-secondary disabled" data-toggle="button" aria-pressed="false">
+          Faked disabled button using <code>&lt;a href="#"&gt;</code>
+        </a>
+      </div>
+
       <div>
         <div tabindex="0" id="fake2" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
           Faked button using <code>&lt;div&gt;</code>

From e834129ebbc1c3583362d5a779ab0f23e75c1768 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 7 Jun 2019 00:02:02 +0100
Subject: [PATCH 29/41] Tighten and combine related unit tests

---
 js/tests/unit/button.js | 117 ++++++++++++++++------------------------
 1 file changed, 46 insertions(+), 71 deletions(-)

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index dfdcfffa599f..d37795276a34 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -35,116 +35,91 @@ $(function () {
     assert.strictEqual($button[0], $el[0], 'collection contains element')
   })
 
-  QUnit.test('should toggle active (testing using bootStrapButton(\'toggle\') rather than click())', function (assert) {
-    assert.expect(2)
-    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
+  QUnit.test('should toggle active and aria-pressed (testing using bootStrapButton(\'toggle\') rather than click())', function (assert) {
+    assert.expect(4)
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">mdo</button>')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $btn.bootstrapButton('toggle')
-    assert.ok($btn.hasClass('active'), 'btn has class active')
-  })
-
-  QUnit.test('should toggle active for <button>', function (assert) {
-    assert.expect(2)
-    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
-    $btn.appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $btn[0].click()
-    assert.ok($btn.hasClass('active'), 'btn has class active')
+    assert.ok($btn.hasClass('active'), 'after toggle btn has class active')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'after toggle btn aria-pressed state is true')
   })
 
-  QUnit.test('should toggle aria-pressed for <button>', function (assert) {
-    assert.expect(2)
-    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+  QUnit.test('should toggle active and aria-pressed for <button>', function (assert) {
+    assert.expect(4)
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">mdo</button>')
     $btn.appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $btn[0].click()
-    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
-  })
-
-  QUnit.test('should toggle active for <div> faked button', function (assert) {
-    assert.expect(2)
-    var $btn = $('<div tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</div>')
-    $btn.appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $btn[0].click() // in real-world use, authors will need to add custom keyboard handling to actually fire the click() when pressing ENTER/SPACE
-    assert.ok($btn.hasClass('active'), 'btn has class active')
+    assert.ok($btn.hasClass('active'), 'after click btn has class active')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'after click btn aria-pressed state is true')
   })
 
-  QUnit.test('should toggle aria-pressed for <div> faked button', function (assert) {
-    assert.expect(2)
+  QUnit.test('should toggle active and aria-pressed for <div> faked button', function (assert) {
+    assert.expect(4)
     var $btn = $('<div tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</div>')
     $btn.appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $btn[0].click() // in real-world use, authors will need to add custom keyboard handling to actually fire the click() when pressing ENTER/SPACE
-    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+    assert.ok($btn.hasClass('active'), 'after click btn has class active')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'after click btn aria-pressed state is true')
   })
 
-  QUnit.test('should toggle active for <a href="#"> faked button', function (assert) {
-    assert.expect(2)
+  QUnit.test('should toggle active and aria-pressed for <a href="#"> faked button', function (assert) {
+    assert.expect(4)
     var $btn = $('<a href="#" tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</a>')
     $btn.appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $btn[0].click()
-    assert.ok($btn.hasClass('active'), 'btn has class active')
-  })
-
-  QUnit.test('should toggle aria-pressed for <a href="#"> faked button', function (assert) {
-    assert.expect(2)
-    var $btn = $('<a tabindex="0" role="button" class="btn" data-toggle="button" aria-pressed="false">faker</a>')
-    $btn.appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $btn[0].click()
-    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
-  })
-
-  QUnit.test('should toggle active when btn children are clicked', function (assert) {
-    assert.expect(2)
-    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
-    var $inner = $('<i/>')
-    $btn
-      .append($inner)
-      .appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $inner[0].click()
-    assert.ok($btn.hasClass('active'), 'btn has class active')
+    assert.ok($btn.hasClass('active'), 'after click btn has class active')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'after click btn aria-pressed state is 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>')
+  QUnit.test('should toggle active and aria-pressed when btn children are clicked', function (assert) {
+    assert.expect(4)
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">mdo</button>')
     var $inner = $('<i/>')
     $btn
       .append($inner)
       .appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $inner[0].click()
-    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+    assert.ok($btn.hasClass('active'), 'after click btn has class active')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'after click btn aria-pressed state is true')
   })
 
   QUnit.test('should add aria-pressed and set to true if original button didn\'t have it', function (assert) {
     assert.expect(1)
-    var $btn = $('<button class="btn" data-toggle="button">redux</button>')
+    var $btn = $('<button class="btn" data-toggle="button">forgetful</button>')
     $btn.appendTo('#qunit-fixture')
     $btn[0].click()
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn has aria-pressed and it\'s set to true')
   })
 
-  QUnit.test('should not toggle aria-pressed on buttons with disabled class', function (assert) {
-    assert.expect(2)
+  QUnit.test('should not toggle active nor aria-pressed on buttons with disabled class', function (assert) {
+    assert.expect(4)
     var $btn = $('<button class="btn disabled" data-toggle="button" aria-pressed="false">redux</button>')
     $btn.appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $btn[0].click()
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
+    assert.ok(!$btn.hasClass('active'), 'after click btn still does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'after click btn aria-pressed state is still false')
   })
 
-  QUnit.test('should not toggle aria-pressed on buttons that are disabled', function (assert) {
-    assert.expect(2)
+  QUnit.test('should not toggle active nor aria-pressed on buttons that are disabled', function (assert) {
+    assert.expect(4)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false" disabled>redux</button>')
     $btn.appendTo('#qunit-fixture')
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.ok(!$btn.hasClass('active'), 'initial btn does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'initial btn aria-pressed state is false')
     $btn[0].click()
-    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is still false')
+    assert.ok(!$btn.hasClass('active'), 'after click btn still does not have active class')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'after click btn aria-pressed state is still false')
   })
 
   QUnit.test('should not toggle active nor aria-pressed for <a href="#"> faked button with disabled class', function (assert) {

From 846c007ae0e4951241c585faa5280842a577d252 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 7 Jun 2019 00:05:15 +0100
Subject: [PATCH 30/41] Stupid typos/unnecessary ids in visual test

---
 js/tests/visual/button.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index 7fb2cb2eeb80..23fa6cf02bfa 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -13,7 +13,7 @@
     <div class="container">
       <h1>Button <small>Bootstrap Visual Test</small></h1>
 
-      <p>Verify that these buttons (except the disabled one) show <code>:focus</code> styling when receiving focus, and that they can be toggled correctly.</p>
+      <p>Verify that these buttons (except the disabled ones) show <code>:focus</code> styling when receiving focus, and that they can be toggled correctly.</p>
 
       <div>
         <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
@@ -34,19 +34,19 @@ <h1>Button <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div>
-        <a href="#" tabindex="0" id="fake1" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
+        <a href="#" tabindex="0" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
           Faked button using <code>&lt;a href="#"&gt;</code>
         </a>
       </div>
 
       <div>
-        <a href="#" tabindex="-1" id="fake1" role="button" class="btn btn-secondary disabled" data-toggle="button" aria-pressed="false">
+        <a href="#" tabindex="-1" role="button" class="btn btn-secondary disabled" data-toggle="button" aria-pressed="false">
           Faked disabled button using <code>&lt;a href="#"&gt;</code>
         </a>
       </div>
 
       <div>
-        <div tabindex="0" id="fake2" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
+        <div tabindex="0" role="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false">
           Faked button using <code>&lt;div&gt;</code>
         </div>
       </div>

From d63e00f30ecaed366ec6816c78c359e26a30eb79 Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Fri, 7 Jun 2019 10:20:56 +0100
Subject: [PATCH 31/41] Rename btn-group-input to just btn-input

The class isn't necessarily just for when you want to use these in a group. You can have these just as a single checkbox, or a set of button-like radio buttons NOT in a button group. Makes more
sense to generalise the name.
---
 scss/_button-group.scss                     | 2 +-
 scss/mixins/_buttons.scss                   | 8 ++++----
 site/content/docs/4.3/components/buttons.md | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 6f1a513642a5..f7ff62233a0c 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -148,7 +148,7 @@
 // See https://github.com/twbs/bootstrap/pull/12794 and
 // https://github.com/twbs/bootstrap/pull/14559 for more information.
 
-.btn-group-input {
+.btn-input {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index b254e46b0f7c..93ed68eb0a3d 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -17,7 +17,7 @@
 
   &:focus,
   &.focus,
-  .btn-group-input:focus ~ & {
+  .btn-input:focus ~ & {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -43,7 +43,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-group-input:checked ~ &,
+  .btn-input:checked ~ &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -75,7 +75,7 @@
 
   &:focus,
   &.focus,
-  .btn-group-input:focus ~ & {
+  .btn-input:focus ~ & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
@@ -87,7 +87,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-group-input:checked ~ &,
+  .btn-input:checked ~ &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 961d6d26cf5a..5e3878bc6640 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -114,7 +114,7 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
 
 {{< example >}}
 <div class="btn-group">
-  <input type="checkbox" class="btn-group-input" id="btnGroupCheckSingle" checked>
+  <input type="checkbox" class="btn-input" id="btnGroupCheckSingle" checked>
   <label class="btn btn-primary" for="btnGroupCheckSingle">
     Checked button
   </label>
@@ -124,15 +124,15 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
 {{< example >}}
 <div class="btn-group">
   <div class="btn-group">
-    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
     <label class="btn btn-primary" for="btnGroupRadio1">Radio button</label>
   </div>
   <div class="btn-group">
-    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio2">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
     <label class="btn btn-primary" for="btnGroupRadio2">Radio button</label>
   </div>
   <div class="btn-group">
-    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio3">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
     <label class="btn btn-primary" for="btnGroupRadio3">Radio button</label>
   </div>
 </div>

From 11ecbe5d18fe758a5044aafa530786b1fc2691ed Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Fri, 7 Jun 2019 10:38:59 +0100
Subject: [PATCH 32/41] Use + next-sibling combinator not ~ subsequent-sibling
 combinator

with ~ it would apply to one or more subsequent siblings. we only want it to affect the sibling immediately after the input, as there's no need to have any further markup in between/around the
label
---
 scss/_button-group.scss   | 2 +-
 scss/mixins/_buttons.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index f7ff62233a0c..27b8aa197ddd 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -153,7 +153,7 @@
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
 
-  ~ .btn {
+  + .btn {
     margin-bottom: 0; // Override default `<label>` value
   }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 93ed68eb0a3d..28e37888aec9 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -17,7 +17,7 @@
 
   &:focus,
   &.focus,
-  .btn-input:focus ~ & {
+  .btn-input:focus + & {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -43,7 +43,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-input:checked ~ &,
+  .btn-input:checked + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -75,7 +75,7 @@
 
   &:focus,
   &.focus,
-  .btn-input:focus ~ & {
+  .btn-input:focus + & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
@@ -87,7 +87,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-input:checked ~ &,
+  .btn-input:checked + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;

From e1f9e3fa6944ea201f0655628801a785504d0888 Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Fri, 7 Jun 2019 11:14:18 +0100
Subject: [PATCH 33/41] Update/extend buttons and button-group docs

- for buttons, just show the clean radio/checkbox buttons
- then in button-group, show how they can be styled into a seamless group
---
 .../docs/4.3/components/button-group.md       | 48 ++++++++++++++++++-
 site/content/docs/4.3/components/buttons.md   | 34 +++++--------
 2 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index d1b45b6ecf77..836f91a7ebd4 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -18,6 +18,40 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {{< /example >}}
 
+## Checkbox and radio button groups
+
+Combine button-like checkboxes and radio buttons into a seamless looking button group.
+
+{{< example >}}
+<div class="btn-group" role="group" aria-label="Checkboxes">
+  <input type="checkbox" class="btn-input" id="btnGroupCheck1" checked>
+  <label class="btn btn-secondary" for="btnGroupCheck1">
+    Checkbox
+  </label>
+  <input type="checkbox" class="btn-input" id="btnGroupCheck2">
+  <label class="btn btn-secondary" for="btnGroupCheck2">
+    Checkbox
+  </label>
+  <input type="checkbox" class="btn-input" id="btnGroupCheck3">
+  <label class="btn btn-secondary" for="btnGroupCheck3">
+    Checkbox
+  </label>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<div class="btn-group" role="group" aria-label="Radio buttons">
+  <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
+  <label class="btn btn-secondary" for="btnGroupRadio1">Radio button</label>
+
+  <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
+  <label class="btn btn-secondary" for="btnGroupRadio2">Radio button</label>
+
+  <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
+  <label class="btn btn-secondary" for="btnGroupRadio3">Radio button</label>
+</div>
+{{< /example >}}
+
 {{< callout warning >}}
 ##### Ensure correct `role` and provide a label
 
@@ -149,7 +183,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
   </div>
 </div>
 
-
 <div class="bd-example">
   <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
     <button type="button" class="btn btn-secondary">Button</button>
@@ -195,6 +228,19 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
   </div>
 </div>
 
+<div class="bd-example">
+  <div class="btn-group-vertical" role="group" aria-label="Radio buttons">
+    <input type="radio" class="btn-input" name="btnGroupVertRadio" id="btnGroupVertRadio1" checked>
+    <label class="btn btn-secondary" for="btnGroupVertRadio1">Radio button</label>
+
+    <input type="radio" class="btn-input" name="btnGroupVertRadio" id="btnGroupVertRadio2">
+    <label class="btn btn-secondary" for="btnGroupVertRadio2">Radio button</label>
+
+    <input type="radio" class="btn-input" name="btnGroupVertRadio" id="btnGroupVertRadio3">
+    <label class="btn btn-secondary" for="btnGroupVertRadio3">Radio button</label>
+  </div>
+</div>
+
 {{< highlight html >}}
 <div class="btn-group-vertical">
   ...
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 5e3878bc6640..caa433c43df2 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -108,34 +108,26 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
 
 ## Checkbox and radio buttons
 
-Bootstrap lets you create checkboxes and radio buttons that look like regular buttons. However, they do require a fairly specific markup structure (see below) to ensure that the styles are all applied correctly as they rely on CSS sibling selectors.
+Bootstrap lets you create checkboxes and radio buttons that look like regular buttons. However, as they rely on CSS next sibling selectors, they require a fairly specific markup structure to ensure that the styles are all applied correctly.
 
 Note that pre-checked buttons require you to manually add the `checked` attribute to the `<input>`.
 
 {{< example >}}
-<div class="btn-group">
-  <input type="checkbox" class="btn-input" id="btnGroupCheckSingle" checked>
-  <label class="btn btn-primary" for="btnGroupCheckSingle">
-    Checked button
-  </label>
-</div>
+<input type="checkbox" class="btn-input" id="btnInputCheckSingle" checked>
+<label class="btn btn-primary" for="btnInputCheckSingle">
+  Checked button
+</label>
 {{< /example >}}
 
 {{< example >}}
-<div class="btn-group">
-  <div class="btn-group">
-    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
-    <label class="btn btn-primary" for="btnGroupRadio1">Radio button</label>
-  </div>
-  <div class="btn-group">
-    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
-    <label class="btn btn-primary" for="btnGroupRadio2">Radio button</label>
-  </div>
-  <div class="btn-group">
-    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
-    <label class="btn btn-primary" for="btnGroupRadio3">Radio button</label>
-  </div>
-</div>
+<input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio1" checked>
+<label class="btn btn-primary" for="btnInputRadio1">Radio button</label>
+
+<input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio2">
+<label class="btn btn-primary" for="btnInputRadio2">Radio button</label>
+
+<input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio3">
+<label class="btn btn-primary" for="btnInputRadio3">Radio button</label>
 {{< /example >}}
 
 ## Button plugin

From 8c83b1df8d2bd52f9db6cba4e9ab7ab10c81ba0a Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Fri, 7 Jun 2019 11:27:29 +0100
Subject: [PATCH 34/41] Move btn-input to more logical place, fix button group
 styles to allow for radio/checkbox buttons

---
 scss/_button-group.scss | 34 +++++++++-------------------------
 scss/_buttons.scss      | 22 ++++++++++++++++++++++
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 27b8aa197ddd..5396ebd3b52d 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -36,17 +36,20 @@
 .btn-group {
   // Prevent double borders when buttons are next to each other
   > .btn:not(:first-child),
-  > .btn-group:not(:first-child) {
+  > .btn-group:not(:first-child),
+  > .btn:not(:first-of-type) {
     margin-left: -$btn-border-width;
   }
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn:not(:last-of-type):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
     @include border-right-radius(0);
   }
 
   > .btn + .btn,
+  > .btn:not(:first-of-type),
   > .btn-group + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-left-radius(0);
@@ -118,42 +121,23 @@
   }
 
   > .btn:not(:first-child),
+  > .btn:not(:first-of-type),
   > .btn-group:not(:first-child) {
     margin-top: -$btn-border-width;
   }
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn:not(:last-of-type):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
     @include border-bottom-radius(0);
   }
 
   > .btn + .btn,
+  > .btn ~ .btn:not(:first-of-type),
   > .btn-group + .btn,
-  > .btn-group:not(:first-child) > .btn {
+  > .btn-group:not(:first-child) > .btn,
+  > .btn-group:not(:first-of-type) > .btn {
     @include border-top-radius(0);
   }
 }
-
-
-// Checkbox and radio options
-//
-// In order to support the browser's form validation feedback, powered by the
-// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
-// `display: none;` or `visibility: hidden;` as that also hides the popover.
-// Simply visually hiding the inputs via `opacity` would leave them clickable in
-// certain cases which is prevented by using `clip` and `pointer-events`.
-// This way, we ensure a DOM element is visible to position the popover from.
-//
-// See https://github.com/twbs/bootstrap/pull/12794 and
-// https://github.com/twbs/bootstrap/pull/14559 for more information.
-
-.btn-input {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  pointer-events: none;
-
-  + .btn {
-    margin-bottom: 0; // Override default `<label>` value
-  }
-}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 2adce28b47f6..1212926b659b 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -135,3 +135,25 @@ input[type="button"] {
     width: 100%;
   }
 }
+
+// Checkbox and radio button
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+.btn-input {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+
+  + .btn {
+    margin-bottom: 0; // Override default `<label>` value
+  }
+}

From bfe562fed16491407a0e060fa6409f05facca2db Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 7 Jun 2019 14:57:17 +0300
Subject: [PATCH 35/41] Update button.html

---
 js/tests/visual/button.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index 23fa6cf02bfa..a14b0c61e46b 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -59,15 +59,16 @@ <h1>Button <small>Bootstrap Visual Test</small></h1>
     <script>
     /* Quick and dirty extra keyboard handling for fake buttons */
     var fakes = document.querySelectorAll('div[role="button"]');
-    for(var i = 0; i<fakes.length; i++) {
+    for (var i = 0; i < fakes.length; i++) {
       fakes[i].addEventListener('keyup', function (e) {
         if ((e.keyCode == 13) || (e.keyCode == 32)) {
           this.click();
         }
       })
     }
+
     var fakes = document.querySelectorAll('a[role="button"]');
-    for(var i = 0; i<fakes.length; i++) {
+    for (var i = 0; i < fakes.length; i++) {
       fakes[i].addEventListener('keyup', function (e) {
         if (e.keyCode == 32) {
           this.click();

From c4bedfd89e17a74843ebf540ae7ffc1204301e1c Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Mon, 10 Jun 2019 17:42:49 +0100
Subject: [PATCH 36/41] Add new `button-input-wrapper` wrapper, expand CSS,
 expand docs

- `button-input-wrapper` Makes this arguably more contained/flexible, less prone to problems with varied markup authors may have
- expanded the CSS to cover all extra styling required, including correct focus/hover/active styles and button group additions/tweaks
- expanded docs considerably to give more examples or these checkbox/radio button buttons in action - would love to use outline variants, but
it appears our outline buttons lack distinction between hovered and active/checked, making them useless for now. to be addressed in a separate
PR, and then revisit this with nicer outline buttons that really show off things like button groups with checkboxes/radios nicely
---
 scss/_button-group.scss                       | 25 +++---
 scss/_buttons.scss                            | 27 +++++++
 scss/mixins/_buttons.scss                     | 10 ++-
 .../docs/4.3/components/button-group.md       | 66 +++++++++------
 site/content/docs/4.3/components/buttons.md   | 80 ++++++++++++++++---
 5 files changed, 160 insertions(+), 48 deletions(-)

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 5396ebd3b52d..36af10046e0c 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -37,21 +37,22 @@
   // Prevent double borders when buttons are next to each other
   > .btn:not(:first-child),
   > .btn-group:not(:first-child),
-  > .btn:not(:first-of-type) {
+  > .btn-input-wrapper:not(:first-child) {
     margin-left: -$btn-border-width;
   }
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn:not(:last-of-type):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
+  > .btn-group:not(:last-child) > .btn,
+  > .btn-input-wrapper:not(:last-child) > .btn {
     @include border-right-radius(0);
   }
 
   > .btn + .btn,
-  > .btn:not(:first-of-type),
   > .btn-group + .btn,
-  > .btn-group:not(:first-child) > .btn {
+  > .btn-input-wrapper + .btn,
+  > .btn-group:not(:first-child) > .btn,
+  > .btn-input-wrapper:not(:first-child) > .btn {
     @include border-left-radius(0);
   }
 }
@@ -121,23 +122,25 @@
   }
 
   > .btn:not(:first-child),
-  > .btn:not(:first-of-type),
-  > .btn-group:not(:first-child) {
+  > .btn-group:not(:first-child),
+  > .btn-input-wrapper:not(:first-child) {
     margin-top: -$btn-border-width;
   }
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn:not(:last-of-type):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
+  > .btn-group:not(:last-child) > .btn,
+  > .btn-input-wrapper:not(:last-child) > .btn {
     @include border-bottom-radius(0);
   }
 
   > .btn + .btn,
-  > .btn ~ .btn:not(:first-of-type),
   > .btn-group + .btn,
   > .btn-group:not(:first-child) > .btn,
-  > .btn-group:not(:first-of-type) > .btn {
+  > .btn-group:not(:first-of-type) > .btn,
+  > .btn-input-wrapper + .btn,
+  > .btn-input-wrapper:not(:first-child) > .btn,
+  > .btn-input-wrapper:not(:first-of-type) > .btn {
     @include border-top-radius(0);
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 1212926b659b..69795f905147 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -157,3 +157,30 @@ input[type="button"] {
     margin-bottom: 0; // Override default `<label>` value
   }
 }
+
+// Make the button input wrapper behave like a button
+.btn-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  > .btn-input:focus + .btn,
+  > .btn-input:active + .btn {
+    // Bring the buttons for focused abd actuve button inputs to the front to overlay
+    // the borders properly
+
+    z-index: 1;
+  }
+
+  &,
+  & label {
+    // remove the default bottom margin for <label> when used for a button wrapper
+    margin-bottom: 0;
+  }
+
+}
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 28e37888aec9..2d4a75151de1 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -15,9 +15,11 @@
     border-color: $hover-border;
   }
 
+  // :active for button checkbox/radio here as well, as focus is only given *after* it's clicked/activated, compared to buttons/links
   &:focus,
   &.focus,
-  .btn-input:focus + & {
+  .btn-input:focus + &,
+  .btn-input:active + & {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -44,6 +46,7 @@
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .btn-input:checked + &,
+  .btn-input:active + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -73,9 +76,11 @@
     border-color: $active-border;
   }
 
+  // :active for button checkbox/radio here as well, as focus is only given *after* it's clicked/activated, compared to buttons/links
   &:focus,
   &.focus,
-  .btn-input:focus + & {
+  .btn-input:focus + &,
+  .btn-input:active + & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
@@ -88,6 +93,7 @@
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .btn-input:checked + &,
+  .btn-input:active + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index 836f91a7ebd4..33edcb2cde90 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -23,32 +23,46 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 Combine button-like checkboxes and radio buttons into a seamless looking button group.
 
 {{< example >}}
+<!-- Implicit <label> -->
 <div class="btn-group" role="group" aria-label="Checkboxes">
-  <input type="checkbox" class="btn-input" id="btnGroupCheck1" checked>
-  <label class="btn btn-secondary" for="btnGroupCheck1">
-    Checkbox
+  <label class="btn-input-wrapper">
+    <input type="checkbox" class="btn-input">
+    <span class="btn btn-secondary">
+      Checkbox 1
+    </span>
   </label>
-  <input type="checkbox" class="btn-input" id="btnGroupCheck2">
-  <label class="btn btn-secondary" for="btnGroupCheck2">
-    Checkbox
+  <label class="btn-input-wrapper">
+    <input type="checkbox" class="btn-input">
+    <span class="btn btn-secondary">
+      Checkbox 2
+    </span>
   </label>
-  <input type="checkbox" class="btn-input" id="btnGroupCheck3">
-  <label class="btn btn-secondary" for="btnGroupCheck3">
-    Checkbox
+  <label class="btn-input-wrapper">
+    <input type="checkbox" class="btn-input">
+    <span class="btn btn-secondary">
+      Checkbox 3
+    </span>
   </label>
 </div>
 {{< /example >}}
 
 {{< example >}}
+<!-- Explicit <label> with for/id relationship -->
 <div class="btn-group" role="group" aria-label="Radio buttons">
-  <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
-  <label class="btn btn-secondary" for="btnGroupRadio1">Radio button</label>
+  <div class="btn-input-wrapper">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
+    <label class="btn btn-secondary" for="btnGroupRadio1">Radio 1</label>
+  </div>
 
-  <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
-  <label class="btn btn-secondary" for="btnGroupRadio2">Radio button</label>
+  <div class="btn-input-wrapper">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
+    <label class="btn btn-secondary" for="btnGroupRadio2">Radio 2</label>
+  </div>
 
-  <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
-  <label class="btn btn-secondary" for="btnGroupRadio3">Radio button</label>
+  <div class="btn-input-wrapper">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
+    <label class="btn btn-secondary" for="btnGroupRadio3">Radio 3</label>
+  </div>
 </div>
 {{< /example >}}
 
@@ -230,14 +244,20 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
 
 <div class="bd-example">
   <div class="btn-group-vertical" role="group" aria-label="Radio buttons">
-    <input type="radio" class="btn-input" name="btnGroupVertRadio" id="btnGroupVertRadio1" checked>
-    <label class="btn btn-secondary" for="btnGroupVertRadio1">Radio button</label>
-
-    <input type="radio" class="btn-input" name="btnGroupVertRadio" id="btnGroupVertRadio2">
-    <label class="btn btn-secondary" for="btnGroupVertRadio2">Radio button</label>
-
-    <input type="radio" class="btn-input" name="btnGroupVertRadio" id="btnGroupVertRadio3">
-    <label class="btn btn-secondary" for="btnGroupVertRadio3">Radio button</label>
+    <label class="btn-input-wrapper">
+      <input type="radio" class="btn-input" name="btnGroupVertRadio" checked>
+      <span class="btn btn-secondary">Radio 1</span>
+    </label>
+
+    <label class="btn-input-wrapper">
+      <input type="radio" class="btn-input" name="btnGroupVertRadio">
+      <span class="btn btn-secondary">Radio 2</span>
+    </label>
+
+    <label class="btn-input-wrapper">
+      <input type="radio" class="btn-input" name="btnGroupVertRadio">
+      <span class="btn btn-secondary">Radio 3</span>
+    </label>
   </div>
 </div>
 
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index caa433c43df2..56f411f06014 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -106,28 +106,80 @@ Disabled buttons using the `<a>` element behave a bit different:
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
 {{< /callout >}}
 
-## Checkbox and radio buttons
+## Checkboxes and radio buttons
 
-Bootstrap lets you create checkboxes and radio buttons that look like regular buttons. However, as they rely on CSS next sibling selectors, they require a fairly specific markup structure to ensure that the styles are all applied correctly.
+Bootstrap lets you create checkboxes and radio buttons that look like regular buttons. However, as they rely on CSS next sibling selectors, they require a fairly specific markup structure with a `.btn-input-wrapper` to ensure that the styles are all applied correctly.
 
 Note that pre-checked buttons require you to manually add the `checked` attribute to the `<input>`.
 
 {{< example >}}
-<input type="checkbox" class="btn-input" id="btnInputCheckSingle" checked>
-<label class="btn btn-primary" for="btnInputCheckSingle">
-  Checked button
+<!-- Explicit <label> with for/id relationship -->
+<div class="btn-input-wrapper">
+  <input type="checkbox" class="btn-input" id="btnInputCheckSingle1" checked>
+  <label class="btn btn-primary" for="btnInputCheckSingle1">
+    Pre-checked checkbox
+  </label>
+</div>
+
+<div class="btn-input-wrapper">
+  <input type="checkbox" class="btn-input" id="btnInputCheckSingle2">
+  <label class="btn btn-primary" for="btnInputCheckSingle2">
+    Another checkbox
+  </label>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<!-- Implicit <label> -->
+<label class="btn-input-wrapper">
+  <input type="checkbox" class="btn-input" checked>
+  <span class="btn btn-primary">
+    Pre-checked checkbox
+  </span>
+</label>
+
+<label class="btn-input-wrapper">
+  <input type="checkbox" class="btn-input">
+  <span class="btn btn-primary">
+    Another checkbox
+  </span>
 </label>
 {{< /example >}}
 
 {{< example >}}
-<input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio1" checked>
-<label class="btn btn-primary" for="btnInputRadio1">Radio button</label>
+<!-- Explicit <label> with for/id relationship -->
+<div class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio1" checked>
+  <label class="btn btn-primary" for="btnInputRadio1">Radio 1</label>
+</div>
+
+<div class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio2">
+  <label class="btn btn-primary" for="btnInputRadio2">Radio 2</label>
+</div>
+
+<div class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio3">
+  <label class="btn btn-primary" for="btnInputRadio3">Radio 3</label>
+</div>
+{{< /example >}}
 
-<input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio2">
-<label class="btn btn-primary" for="btnInputRadio2">Radio button</label>
+{{< example >}}
+<!-- Implicit <label> -->
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioImp" checked>
+  <span class="btn btn-primary">Radio 1</span>
+</label>
+
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioImp">
+  <span class="btn btn-primary">Radio 2</span>
+</label>
 
-<input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio3">
-<label class="btn btn-primary" for="btnInputRadio3">Radio button</label>
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioImp">
+  <span class="btn btn-primary">Radio 3</span>
+</label>
 {{< /example >}}
 
 ## Button plugin
@@ -139,8 +191,12 @@ The button plugin allows you to create simple on/off toggle buttons.
 Add `data-toggle="button"` to toggle a button's `active` state and `aria-pressed` attribute. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
 
 {{< example >}}
+<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
+  Pre-toggled toggle
+</button>
+
 <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
-  Single toggle
+  Another toggle
 </button>
 {{< /example >}}
 

From 8bc5e968e1a57c164f276b58d35f21f7c197eef2 Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Tue, 11 Jun 2019 01:09:13 +0100
Subject: [PATCH 37/41] Add disabled variants to the checkbox, radio button and
 toggle button examples

though styles aren't done for these yet, coming next...
---
 site/content/docs/4.3/components/buttons.md | 28 +++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 56f411f06014..858f176e0b97 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -127,6 +127,13 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
     Another checkbox
   </label>
 </div>
+
+<div class="btn-input-wrapper">
+  <input type="checkbox" class="btn-input" id="btnInputCheckSingle3" disabled>
+  <label class="btn btn-primary" for="btnInputCheckSingle3">
+    A disabled checkbox
+  </label>
+</div>
 {{< /example >}}
 
 {{< example >}}
@@ -144,6 +151,13 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
     Another checkbox
   </span>
 </label>
+
+<label class="btn-input-wrapper">
+  <input type="checkbox" class="btn-input" disabled>
+  <span class="btn btn-primary">
+    A disabled checkbox
+  </span>
+</label>
 {{< /example >}}
 
 {{< example >}}
@@ -162,6 +176,11 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
   <input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio3">
   <label class="btn btn-primary" for="btnInputRadio3">Radio 3</label>
 </div>
+
+<div class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadio" id="btnInputRadio4" disabled>
+  <label class="btn btn-primary" for="btnInputRadio4">Radio 4 (disabled)</label>
+</div>
 {{< /example >}}
 
 {{< example >}}
@@ -180,6 +199,11 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
   <input type="radio" class="btn-input" name="btnInputRadioImp">
   <span class="btn btn-primary">Radio 3</span>
 </label>
+
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioImp" disabled>
+  <span class="btn btn-primary">Radio 4 (disabled)</span>
+</label>
 {{< /example >}}
 
 ## Button plugin
@@ -198,6 +222,10 @@ Add `data-toggle="button"` to toggle a button's `active` state and `aria-pressed
 <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
   Another toggle
 </button>
+
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" disabled>
+  Disabled toggle
+</button>
 {{< /example >}}
 
 ### Methods

From c90e312c42560f29c26d89fa53e41633554af05f Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Tue, 11 Jun 2019 08:40:16 +0100
Subject: [PATCH 38/41] Add missing :disabled styles for checkbox/radio button
 buttons

---
 scss/_buttons.scss        | 19 ++++++++++++++++++
 scss/mixins/_buttons.scss | 42 +++++++++++++++++++++++++++++++--------
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 69795f905147..3fa5744aae6b 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -156,6 +156,25 @@ input[type="button"] {
   + .btn {
     margin-bottom: 0; // Override default `<label>` value
   }
+
+  &:focus + .btn {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &:disabled + .btn {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):active + .btn {
+    @include box-shadow($btn-active-box-shadow);
+  }
+
+  &:not(:disabled):active:focus + .btn {
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
 }
 
 // Make the button input wrapper behave like a button
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 2d4a75151de1..815f07a9167d 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -19,7 +19,7 @@
   &:focus,
   &.focus,
   .btn-input:focus + &,
-  .btn-input:active + & {
+  .btn-input:not(:disabled):active + & {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -33,7 +33,8 @@
 
   // Disabled comes first so active can properly restyle
   &.disabled,
-  &:disabled {
+  &:disabled,
+  .btn-input:disabled + & {
     color: color-yiq($background);
     background-color: $background;
     border-color: $border;
@@ -45,8 +46,8 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-input:checked + &,
-  .btn-input:active + &,
+  .btn-input:not(:disabled):checked + &,
+  .btn-input:not(:disabled):active + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -64,6 +65,20 @@
       }
     }
   }
+
+  // Duplicate the disabled styles again specifically to
+  // override the previous :active styles, as button-like
+  // checkbox/radio buttons can't be excluded generically
+  // from the previous set of selectors
+  .btn-input:disabled + &:active {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
 }
 
 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
@@ -80,20 +95,22 @@
   &:focus,
   &.focus,
   .btn-input:focus + &,
-  .btn-input:active + & {
+  .btn-input:not(:disabled):active + & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
   &.disabled,
-  &:disabled {
+  &:disabled,
+  .btn-input:disabled + &,
+  .btn-input:not(:disabled) + &:active {
     color: $color;
     background-color: transparent;
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-input:checked + &,
-  .btn-input:active + &,
+  .btn-input:not(:disabled):checked + &,
+  .btn-input:not(:disabled):active + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -108,6 +125,15 @@
       }
     }
   }
+
+  // Duplicate the disabled styles again specifically to
+  // override the previous :active styles, as button-like
+  // checkbox/radio buttons can't be excluded generically
+  // from the previous set of selectors
+  .btn-input:disabled + &:active {
+    color: $color;
+    background-color: transparent;
+  }
 }
 
 // Button sizes

From 34580c4bd562138e0076cf4ccb893d87ae802f2b Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Tue, 11 Jun 2019 12:04:03 +0100
Subject: [PATCH 39/41] Expand examples of buttons further

Just to prove the point that color, outline, size can all be changed here as well
---
 .../docs/4.3/components/button-group.md       |  6 ++---
 site/content/docs/4.3/components/buttons.md   | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index 33edcb2cde90..5327aba483cb 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -51,17 +51,17 @@ Combine button-like checkboxes and radio buttons into a seamless looking button
 <div class="btn-group" role="group" aria-label="Radio buttons">
   <div class="btn-input-wrapper">
     <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
-    <label class="btn btn-secondary" for="btnGroupRadio1">Radio 1</label>
+    <label class="btn btn-outline-secondary" for="btnGroupRadio1">Radio 1</label>
   </div>
 
   <div class="btn-input-wrapper">
     <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
-    <label class="btn btn-secondary" for="btnGroupRadio2">Radio 2</label>
+    <label class="btn btn-outline-secondary" for="btnGroupRadio2">Radio 2</label>
   </div>
 
   <div class="btn-input-wrapper">
     <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
-    <label class="btn btn-secondary" for="btnGroupRadio3">Radio 3</label>
+    <label class="btn btn-outline-secondary" for="btnGroupRadio3">Radio 3</label>
   </div>
 </div>
 {{< /example >}}
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
index 858f176e0b97..f3ce445ae09a 100644
--- a/site/content/docs/4.3/components/buttons.md
+++ b/site/content/docs/4.3/components/buttons.md
@@ -206,6 +206,31 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
 </label>
 {{< /example >}}
 
+Of course, you can apply the same variations, such as outline buttons and different sizes, to these checkboxes and radio buttons as well.
+
+{{< example >}}
+<!-- Implicit <label> -->
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioVar" checked>
+  <span class="btn btn-outline-danger btn-lg">Radio 1</span>
+</label>
+
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioVar">
+  <span class="btn btn-outline-danger btn-lg">Radio 2</span>
+</label>
+
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioVar">
+  <span class="btn btn-outline-danger btn-lg">Radio 3</span>
+</label>
+
+<label class="btn-input-wrapper">
+  <input type="radio" class="btn-input" name="btnInputRadioVar" disabled>
+  <span class="btn btn-outline-danger btn-lg">Radio 4 (disabled)</span>
+</label>
+{{< /example >}}
+
 ## Button plugin
 
 The button plugin allows you to create simple on/off toggle buttons.

From 9ed0803c1e09b83d49df95c65587ff79e5e58286 Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Tue, 11 Jun 2019 20:18:42 +0100
Subject: [PATCH 40/41] Remove generic focus for checkbox/radio .btn

This ended up too strong and overrode the box shadow from the color/outline variations
---
 scss/_buttons.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 3fa5744aae6b..936f1ffc5c01 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -159,7 +159,6 @@ input[type="button"] {
 
   &:focus + .btn {
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -192,7 +191,6 @@ input[type="button"] {
   > .btn-input:active + .btn {
     // Bring the buttons for focused abd actuve button inputs to the front to overlay
     // the borders properly
-
     z-index: 1;
   }
 

From 620992ecb240fde4a547b8ffffa043dff4b41aad Mon Sep 17 00:00:00 2001
From: patrickhlauke <redux@splintered.co.uk>
Date: Wed, 12 Jun 2019 21:22:55 +0100
Subject: [PATCH 41/41] Move callout to more logical place in button-group doc

---
 site/content/docs/4.3/components/button-group.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/content/docs/4.3/components/button-group.md b/site/content/docs/4.3/components/button-group.md
index 5327aba483cb..78c7af39b639 100644
--- a/site/content/docs/4.3/components/button-group.md
+++ b/site/content/docs/4.3/components/button-group.md
@@ -18,6 +18,14 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {{< /example >}}
 
+{{< callout warning >}}
+##### Ensure correct `role` and provide a label
+
+In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
+
+In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
+{{< /callout >}}
+
 ## Checkbox and radio button groups
 
 Combine button-like checkboxes and radio buttons into a seamless looking button group.
@@ -66,14 +74,6 @@ Combine button-like checkboxes and radio buttons into a seamless looking button
 </div>
 {{< /example >}}
 
-{{< callout warning >}}
-##### Ensure correct `role` and provide a label
-
-In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
-
-In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
-{{< /callout >}}
-
 ## Button toolbar
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.