From 0a6cf9036c6bc3c5d1c68de971c95b70f5125aca Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 3 Jul 2020 12:34:32 +0100
Subject: [PATCH] Docs: improve/expand button documentation (#31093)

* Docs: improve/expand button documentation

- since we're not doing the disabled cursor thing anymore anyway, remove confusing/unnecessary mention for link-based disabled buttons
- make the disabled toggle example using a link actually follow the preceding advice of also having `tabindex="-1"` and `aria-disabled="true"`
- tweak the link functionality callout to also still mention `aria-disabled` to reinforce the idea
- tweak toggle state description (not just `<button>`s, but also links etc...so just remove mention of `<button>` there; also reinforce accessibility aspect once more)
- add a new callout that cross-references checkbox-based toggles, and what the similarity/difference between them is
- add a matching cross-reference callout to the checkbox-based toggle buttons page

* Update link to now renamed checks-radios.md
---
 site/content/docs/5.0/components/buttons.md  | 12 ++++++++----
 site/content/docs/5.0/forms/checks-radios.md |  4 ++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
index fbd9600dcd..eaede8f4eb 100644
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.0/components/buttons.md
@@ -87,7 +87,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
 Disabled buttons using the `<a>` element behave a bit different:
 
 - `<a>`s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
-- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all.
+- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons.
 - Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
 
 {{< example >}}
@@ -98,16 +98,20 @@ Disabled buttons using the `<a>` element behave a bit different:
 {{< callout warning >}}
 ##### Link functionality caveat
 
-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.
+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, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
 {{< /callout >}}
 
 ## Button plugin
 
 The button plugin allows you to create simple on/off toggle buttons.
 
+{{< callout info >}}
+Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
+{{< /callout >}}
+
 ### 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>`.
+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 ensure that it is conveyed appropriately to assistive technologies.
 
 {{< example >}}
 <button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Toggle button</button>
@@ -118,7 +122,7 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to
 {{< example >}}
 <a href="#" class="btn btn-primary" role="button" data-toggle="button">Toggle link</a>
 <a href="#" class="btn btn-primary active" role="button" data-toggle="button" aria-pressed="true">Active toggle link</a>
-<a href="#" class="btn btn-primary disabled" role="button" data-toggle="button">Disabled toggle link</a>
+<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-toggle="button">Disabled toggle link</a>
 {{< /example >}}
 
 ### Methods
diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md
index 6d8bdf3860..8de3d43364 100644
--- a/site/content/docs/5.0/forms/checks-radios.md
+++ b/site/content/docs/5.0/forms/checks-radios.md
@@ -227,6 +227,10 @@ Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox styl
 <label class="btn btn-primary" for="btn-check-2">Checked</label>
 {{< /example >}}
 
+{{< callout info >}}
+Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
+{{< /callout >}}
+
 ### Radio toggle buttons
 
 Toggle buttons can be grouped in a [button group]({{< docsref "/components/button-group" >}}) if needed.