From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Mon, 10 Apr 2017 13:43:54 +0000 (+0100)
Subject: Only change aria-pressed if it's not an input-based radio or checkbox group
X-Git-Tag: v4.0.0-beta~166^2~103
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3f6e1faf45d503d670e01b600a0455e2da0fe660;p=thirdparty%2Fbootstrap.git

Only change aria-pressed if it's not an input-based radio or checkbox group

* Only change aria-pressed if it's not an input-based radio or checkbox group

aria-pressed="true"/aria-pressed="false" is really only useful for
making on/off toggles out of, say, `<button>` elements. the attribute is
useless (and potentially confusing/conflicting) on, say, `<label>`
elements for an existing `<input type="radio">` or similar.

* Add unit test for buttons.js and radio/checkbox inputs in button groups
---

diff --git a/js/src/button.js b/js/src/button.js
index 76c5cdd15f..6295d0db05 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -66,6 +66,7 @@ const Button = (($) => {
 
     toggle() {
       let triggerChangeEvent = true
+      let addAriaPressed = true
       const rootElement      = $(this._element).closest(
         Selector.DATA_TOGGLE
       )[0]
@@ -94,12 +95,15 @@ const Button = (($) => {
           }
 
           input.focus()
+          addAriaPressed = false
         }
 
       }
 
-      this._element.setAttribute('aria-pressed',
-        !$(this._element).hasClass(ClassName.ACTIVE))
+      if (addAriaPressed) {
+        this._element.setAttribute('aria-pressed',
+          !$(this._element).hasClass(ClassName.ACTIVE))
+      }
 
       if (triggerChangeEvent) {
         $(this._element).toggleClass(ClassName.ACTIVE)
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index c67cea345b..abc04e10a9 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -138,4 +138,22 @@ $(function () {
     assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
   })
 
+  QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
+    assert.expect(2)
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+      + '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>'
+      + '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>'
+      + '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+
+    var $btn1 = $group.children().eq(0)
+    var $btn2 = $group.children().eq(1)
+
+    $btn1.find('input').trigger('click')
+    assert.ok($btn1.is(':not([aria-pressed])'), 'label for nested checkbox input has not been given an aria-pressed attribute')
+
+    $btn2.find('input').trigger('click')
+    assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute')
+  })
+
 })