Add `aria-pressed` to single toggle buttons

also includes tiny fix/clarification to two existing unit tests for the
.active class, adding data-toggle=“button” explicitly to the tested
buttons

Closes #14819.

3 files changed, 27 insertions, 3 deletions

diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index 617fc8c81..cf0bfcb9e 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -36,15 +36,19 @@
   <h2 id="buttons-single-toggle">Single toggle</h2>
   <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
   <div class="bs-example">
-    <button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
+    <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
       Single toggle
     </button>
   </div><!-- /example -->
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
   Single toggle
 </button>
 {% endhighlight %}
+  <div class="bs-callout bs-callout-warning">
+    <h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
+    <p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
+  </div>
 
   <h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
   <p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>
diff --git a/js/button.js b/js/button.js
index b3e944c59..901e47a6e 100644
--- a/js/button.js
+++ b/js/button.js
@@ -60,6 +60,8 @@
         else $parent.find('.active').removeClass('active')
       }
       if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
+    } else {
+      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
     }
 
     if (changed) this.$element.toggleClass('active')
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index bd431d546..73747cdd4 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -85,7 +85,7 @@ $(function () {
   })
 
   test('should toggle active', function () {
-    var $btn = $('<button class="btn">mdo</button>')
+    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
     ok(!$btn.hasClass('active'), 'btn does not have active class')
     $btn.bootstrapButton('toggle')
     ok($btn.hasClass('active'), 'btn has class active')
@@ -102,6 +102,24 @@ $(function () {
     ok($btn.hasClass('active'), 'btn has class active')
   })
 
+  test('should toggle aria-pressed', function () {
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    equal($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $btn.bootstrapButton('toggle')
+    equal($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+  })
+
+  test('should toggle aria-pressed when btn children are clicked', function () {
+    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
+    var $inner = $('<i/>')
+    $btn
+      .append($inner)
+      .appendTo('#qunit-fixture')
+    equal($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $inner.click()
+    equal($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+  })
+
   test('should toggle active when btn children are clicked within btn-group', function () {
     var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>')
     var $btn = $('<button class="btn">fat</button>')