Radio button content needs some editorial updates

[mbgower]

A review of the radio button's Usage and Style pages was carried out as part of an accessibility review. Most of the consideration are to do with consistency of information provided in the Usage content, and what look like a few editorial problems as a result of pasting information from Checkbox directly into Radio button usage.

A few design and implementation considerations for the Radio button component have been flagged in the Radio button usage.pdf document. Note that there are comments from both Jess Lin and myself (and I sometimes respond to something she said).

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

[laurenmrice]

My notes on actionable tasks from Gowers PDFs

Kits

*This will be covered in separate issues in our carbon design kit repo for Figma, Sketch, and Adobe XD.

Figma: carbon-design-system/carbon-design-kit#546
Sketch: carbon-design-system/carbon-design-kit#554
Adobe XD: carbon-design-system/carbon-design-kit#555

Website (usage)

When to use

• Form: Add selectable tiles and data tables.
• Settings: Include it acts like a filter mechanism.
• Selection in lists: I feel like we can omit this, we already indicate you can use radio buttons in forms and I think this is trying to say a similar thing.

When not to use

• Change terminology to not mention "lists" and instead reference a radio button group in a form.

Live demo

• This is a problem with code. The code example needs to be updated in the live demo. This should be resolved by #11860

Anatomy

• Change first line item to beGroup label (optional).

Content

Group labels (optional)

• First sentence: Omit "If necessary...".
• Second sentence: Revise content to suggest being concise with wording when using it for instructional purposes.
• Fourth sentence: Move and work into the first sentence about group labels.
• Fifth sentence: This is a development question we need to resolve.

Radio button labels

• Second sentence: Omit this sentence until we figure out if we want helper text for radio buttons.

Interactions

Keyboard

• Revise paragraph to incorporate Michael Gowers feedback:

This is inaccurate. Normally, a user never needs to use the Space with a radio button, as the focus and selection state are synchronized. If a user lands on a radio button set WITHOUT a default indicator, they would press Space once to select that one. Or they could press an arrow key which would automatically select the next radio button. There is no means of unselecting a selected radio button with the spacebar. You just select a different one.

Screenreader

• Omit this section.

Default selection

• Omit this section.

Related

Radio button versus toggle switch

• Change paragraph to read as follows:

Toggle switches are preferred when the user options are limited to two choices—on and off or true and false. By comparison, radio buttons can have many other options.

Website (style)

*Follow similar format to what Checkbox already does

• Color: Show an image
• Interactive colors: Show an image and also change heading to say "states" not colors.
• Structure: Fix last spec image to have correct content labeling.