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.

1 files changed, 6 insertions, 2 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>