mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-21 13:29:00 +01:00
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>
This commit is contained in:
parent
f7c361f553
commit
cb87ed2a79
@ -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 >}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user