Add accessibility note to radio-button

[outerpress]

Duplicate check

• I've searched for any related issues and avoided creating a duplicate issue.

This update is for:

Component

What is the name?

Radio button

What is the nature of this update?

• How to build this component/pattern
• When to use this component/pattern
• When to use something else
• Usability guidance
• Accessibility considerations
• Content considerations
• Implementation
• Package information
• Addition to Forms Library documentation
• Update to existing Forms Library documentation

What problem does this solve?

During a 508 audit we received feedback:

The radio button group for "What type of care do you need?" should have the caption "What type of care do you need?". This needs to be read the first time focus is placed on a radio button in the group. So the first radio button that gets focus should read "What type of care do you need? Radio button Amputation care not checked" or something similar. When you arrow to the next radio button in the group it only needs to read the radio button label "Eye Care Radio button not checked".

We updated our radio buttons, but during testing (department-of-veterans-affairs/va.gov-team#99754) we found that Safari reads the "caption" (the fieldset legend) at the end of every radio option when arrowing through them. See recordings in the next section.

@rileyorr found that this is true when this component is used outside of VA.gov.

So the change requested is to document this in the component's accessibility section:

1. The correct behavior, the legend should only read at the end of the radio option when first tabbing into the group
2. Safari doesn't support this.

Also fyi, this was specifically testing with VO on Mac. I didn't have other SRs to test with.

Additional Context

Safari reads the legend at the end of every radio option:

safari-sr-radio-test.mov

Chrome and FireFox read the legend only when first tabbing into the radio group. This was the behavior recommended/expected by the 508 office:

chrome-sr-radio-test.mov

firefox-sr-radio-test.mov