Toggle: Usage and Style documentation

[mbgower]

A review of the toggle's Usage and Style pages was carried out as part of an accessibility review. Note that there are comments from both Jess Lin and myself (and I sometimes respond to something she said).

Key items to consider:

• the Usage page lacks an Anatomy section, which would go a long way to answering some questions we had about how a Heading would be used in a toggle (there are no examples). It may also help align terms on the usage and style pages.
• the usage page does not list all the variants. There are at least 2, possibly 3: the default, a small WITH on/off text, and a small without on/off text. It's worth making it clear that the on/off text is only optional on the Small variant, not the default
• on the Style page, an 'off' toggle is shown with a darker switch circle, which makes the entire construct potentially fail non-text contrast (since the contrast between the outline and the circle is only 2.5:1). It appears this is an anomaly (does not appear on the React components page for example), but the toggle button presentation on all 4 themes (white, grey 10, etc) should be carried out to ensure that the color of the circle is the same as the page background AND that the outline of the toggle contrasts at least 3:1 against this background. ^ bad example ^ less poor example (although I'd bump up the grey of the off toggle while leaving the disc the colour of the background)

---

This document should be opened in Adobe Acrobat Reader (not in a browser) so that all the comments and replies can be reviewed.

[sstrubberg]

Needs new Usage template treatment. Style page images need updates. Style page: we can drop the on/off because we have the tick.

[thyhmdo]

Looks like the Toggle doc has been updated, most of issues were already addressed. Designers can double check/consider if these feedback is outdated

• [ ] Adding an Anatomy image
• [ ] Listing all variants (2- Default and Small)
• [x] Improving the color contrast of the Off toggle\
• [ ] Updating some issues in the Content section
• [ ] Considering the Adding information to Carbon Data table component https://github.ibm.com/IBMa/E2E/issues/4761

[mbgower]

@thyhmdo I ticked off "Improving the contrast" because the poor example has been removed from the style page.

[thyhmdo]

Thank you! @mbgower

[mbgower]

It's also worth mentioning that my poorly worded issue on a requirement for a visible text label (or at least accessible name) for every toggle component was IMO incorrectly closed by in 2019. https://github.com/carbon-design-system/carbon/issues/3613

I think maybe Carbon now has a requirement for a label for a toggle (except in a table cell). If that's the case, 3613 can be considered closed. But I wanted to capture that as with any input, a toggle requires a label (and "on"/"off" is not the label; that's a text representation of the state).