Required radio groups: screen readers aren't announcing the "required" state

[williamjstanton]

🐛 Bug Report

Screen readers are not announcing when a required radio group is required for users.

To Reproduce

Steps to reproduce the behavior:

1. Turn on VoiceOver, launch Safari (may also be reproduced in Chrome)
2. Navigate to the Canvas Kit design site > Components > Inputs > Radio > Examples
3. Set the rotor to "heading" : Ctrl + Opt + Cmd + ArrowRight
4. Jump to the "Required" heading: Ctrl + Opt + Cmd + ArrowDown
5. Read the Required radio group example: Ctrl + Opt + ArrowRight
6. Issue: Observe VoiceOver does not indicated "required" at any time when reading the group, the legend, or the individual inputs.
7. Use the Tab key to focus the radio group
8. Use the Up / Down Arrow keys to select radio buttons
9. Issue: Observe VoiceOver still is not announcing "required" state at any time

Expected Behavior

We want screen readers to announce "required" state to users when reading virtually, or when Tab focus enters the group.

Actual Results

Outlined in reproduction steps above, steps 6 and 9.

Browser (if applicable)

MacOS 12.6.8, Safari 16.6 and Chrome (current build)

Link to repl or repo (highly encouraged)

Design Site: https://canvas.workdaydesign.com/components/inputs/radio#tab=web&heading=required Storybook: https://workday.github.io/canvas-kit/?path=/story/preview-inputs-radio--required

Error Output

Observe HTML 'required' attribute applied to generic <div> element, and the misplaced aria-describedby and aria-checked attributes in screen shot below.

Include a screenshot of a visual bug

### Tasks

[williamjstanton]

Recommendations:

1. Apply the HTML required attribute to the
   element around the radio buttons,
2. Reduced test case: https://codepen.io/apoblete/pen/zYyvRJJ?editors=1010
3. Remove invalud aria from generic elements (see attached screen cap)