51 lines
1.6 KiB
Markdown
51 lines
1.6 KiB
Markdown
---
|
|
title: 'Switch: Reference'
|
|
parts:
|
|
- Switch
|
|
- Reference
|
|
eleventyNavigation:
|
|
key: 'Switch: Reference'
|
|
order: 30
|
|
parent: Switch
|
|
title: Reference
|
|
---
|
|
|
|
# Switch: Reference
|
|
|
|
<p class="lion-paragraph--emphasis">Everything you need to re-use the switch.</p>
|
|
|
|
## Requirements
|
|
|
|
This component fulfils the following requirements:
|
|
|
|
1. The component clearly communicates what is it for.
|
|
2. The component supports helper text.
|
|
3. The component supports smart defaults.
|
|
4. The component supports the following states: on, off, hover (Web only), focused, disabled, pressed and processing
|
|
5. The transformation between ON and OFF states are enhanced by an animation.
|
|
6. Toggling the switch (on <-> off) will execute the underlying action immediately.
|
|
|
|
## Keyboard interactions
|
|
|
|
| <kbd>Key</kbd> | Action |
|
|
| :------------------ | :------------------------------------------------------------------------------------------------ |
|
|
| <kbd>Enter</kbd> | On keyboard focus, pressing <kbd>Enter</kbd> changes the state of the switch to “On” or “Off”. |
|
|
| <kbd>Spacebar</kbd> | On keyboard focus, pressing <kbd>Spacebar</kbd> changes the state of the switch to “On” or “Off”. |
|
|
|
|
## WAI-ARIA roles
|
|
|
|
### Landmarks
|
|
|
|
1. element: "button"<br>
|
|
role: "switch"
|
|
|
|
### Screen reader
|
|
|
|
1. name: “Label”<br>
|
|
role: switch<br>
|
|
state: aria-checked=“true”<br>
|
|
SR: “Label, on, switch"
|
|
2. name: “Label”<br>
|
|
role: switch<br>
|
|
state: aria-checked=“false”<br>
|
|
SR: “Label, off, switch”
|