Radio Card

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

• As someone using the component, I want to understand the label associated with each radio control.
• As someone with a cognitive disability, I want to be able to understand the information required from me, and the answers I can provide.
• As someone with a cognitive disability, I want to be able to understand any errors related to the radios, as well as how to resolve the error.
• As a keyboard-only user, I want to be able to navigate to each of the radios and then activate them using the Space key.
• As someone with a motor disability, I want to be able to easily select the correct radio.
• As a screen reader user, I want the group label relating to the radios to be announced when navigating through the radios.
• As a screen reader user, I want any additional information provided alongside the group label to be announced when navigating through the radios.
• As a screen reader user, I want the radio's label and its state (whether it is checked or not) to be announced when I navigate to it.
• As a screen reader user, I want any error messages relating to the radios to be announced when they become present.
• As a voice-control user, I want to be able to select a radio using its associated label.

Test steps

Use these steps to check that the Radio card component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to the radio card(s).
3. Verify that each radio card has a visible label.
4. Verify that when navigated to, both the radio card's label and the group label are announced and that these match those visually present.
5. Verify that the radio card can be activated using the Space key.
6. Verify that the radio card's state is correctly announced by a screen reader.

If any errors appear when the form is validated, complete the following checks:

1. Turn on a screen reader.
2. Navigate to the radio card(s) using the Tab key.
3. Verify that once the radio card receives focus, that there is an announcement to convey that there is an error with this field.

---