From: Christian Oliff <christianoliff@pm.me>
Date: Thu, 9 Sep 2021 11:37:52 +0000 (+0900)
Subject: docs: Add role="switch" to switches (#34824)
X-Git-Tag: v5.1.2~43
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=cb87ed2a7985744f042b663d2c87653ce68da476;p=thirdparty%2Fbootstrap.git

docs: Add role="switch" to switches (#34824)

* docs: Add role="switch" to switches

* Tweak/expand explanation about assistive technologies

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
---

diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md
index 0f5507f54b..efd040de03 100644
--- a/site/content/docs/5.1/forms/checks-radios.md
+++ b/site/content/docs/5.1/forms/checks-radios.md
@@ -102,23 +102,23 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 
 ## Switches
 
-A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute.
+A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.
 
 {{< example >}}
 <div class="form-check form-switch">
-  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
+  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
   <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
 </div>
 <div class="form-check form-switch">
-  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
+  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
   <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
 </div>
 <div class="form-check form-switch">
-  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
+  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
   <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
 </div>
 <div class="form-check form-switch">
-  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
+  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
   <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
 </div>
 {{< /example >}}