mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 00:24:03 +02:00
Code Issues Releases Wiki Activity

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

Browse Source 
* docs: Add role="switch" to switches

* Tweak/expand explanation about assistive technologies

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
This commit is contained in:
Christian Oliff
2021-09-09 20:37:52 +09:00
committed by GitHub
parent f7c361f553
commit cb87ed2a79
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
site/content/docs/5.1/forms/checks-radios.md
View File

@@ -102,23 +102,23 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
## Switches ## 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 >}} {{< example >}}
<div class="form-check form-switch"> <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> <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div> </div>
<div class="form-check form-switch"> <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> <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div> </div>
<div class="form-check form-switch"> <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> <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div> </div>
<div class="form-check form-switch"> <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> <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div> </div>
{{< /example >}} {{< /example >}}