ToggleButton is a two-state button that the user can turn on or off. The corresponding action takes effect immediately. With ToggleButtonGroup, users can make a mutually exclusive selection from a set of related commands—with only one option selected at a time.
On focus, the screen reader should:
- Identify the toggle button.
- Read out the text.
- Expresses the state.
- Read the position of the option within the total number of buttons available.
| Key | Function |
|---|
| Tab |
- Tab moves focus into the toggle button group. Focus is set to the active button.
- If focus is inside the toggle button group, Tab moves focus out of the toggle button group. Focus is set to the next component in the tab order.
|
| Space / Enter |
- When focus is on the toggle button and the button is inactive, this action activates the button.
- If focus is on an active button, this actions keeps the button active.
|
| Shift + Tab |
- If focus is inside the toggle button group, this action moves focus out of the component. Focus is set to the previous component in the tab order.
- If focus is below the toggle button group, this action move focus into the toggle button group. Focus is set to the active button.
|
| Right arrow / Down arrow |
- This action moves focus to the next toggle button in the toggle button group.
- If focus is on the last toggle button, this action wraps focus to the first toggle button.
|
| Left arrow / Up arrow |
- This action moves focus to the previous toggle button in the toggle button group.
- If focus is on the first toggle button, this action wraps focus to the last toggle button.
|
