Toggle Button

[martalalik]

Goals

• [ ] Add & update variants in Figma.
• [x] Create ToggleButton. Create ToggleButtonGroup.
• [x] Add ToggleButton to Storybook.
• [x] Update Zeroheight.

Research

Requirements

1. Materials:

• Focus and pressed states may reinforce that toggles are part of a group. For example, when one button segment is focused, focus may be displayed simultaneously on the rest of the segment.
• Have at least three toggle buttons in a group.
• Label buttons with text or an icon.
• The following combinations are recommended: -- Multiple and unselected -- Exclusive and unselected -- Exclusive only

Variants:

1. Exclusive selection - With exclusive selection, selecting one option deselects any other. Exclusive selection does not enforce that a button must be active.

2. Multiple selection - Multiple selection allows for logically-grouped options, to have multiple options selected.

3. Vertical buttons.

4. Enforce value set - If you want to enforce that at least one button must be active.

5. Custom - customise the component.

6. With Menu

7. In TopBar.

8. Text only.

9. Icon only.

10. Text & icon.

Accessibility:

1. ARIA - ToggleButtonGroup has role="group". You should provide an accessible label with aria-label="label", aria-labelledby="id"or <label>. ToggleButton sets aria-pressed="<bool>" according to the button state.You should label each button with aria-label.
2. Keyboard - Navigate between buttons with the tab key. The button behaviour follows standard keyboard semantics.

Practice:

• https://www.smashingmagazine.com/2017/09/building-inclusive-toggle-buttons/
• https://www.w3.org/TR/wai-aria-1.1/#switch
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed
• https://joshcollinsworth.com/blog/accessible-toggle-buttons
• https://inclusive-components.design/toggle-button/

Additional info:

• https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57

[martalalik]

Meeting 29.09

Variants:

1. Exclusive selection.
2. Multiple selection.
3. Vertical buttons.
4. Enforce value set.
5. Custom.
6. In TopBar.
7. Text only.
8. Only text.
9. Text & icon.

Implementation checklist:

1. Use <button> element, no links, with aria-pressed.
2. Don’t change label and state together.

🤔

1. BUTTON -> new ToggleButton based on Button with internal aria-pressed? 2. GROUP -> new ToggleButtonGroup based on ButtonGroup wrapper?

[martalalik]

[mimarz]

Released in eds-core-react@0.22.0!