feat(a11y): give RadioGroup aria "radiogroup" role

[bvandercar-vt]

Fixes #0000

Checklist

• [N/A] Includes tests
• [N/A] Update documentation

Changes proposed in this pull request:

RadioGroup component should be getting role="radiogroup". Currently, it's just a div. Everything else about it works in terms of a radiogroup, ie keypresses, attributes, etc.

[ggdouglas]

I'm generally supportive of the direction of this PR since it improves accessibility, but I also think we should more carefully consider how we approach the composition of the label component in the radio group.

I also support adding role="radiogroup" to the component since it should generally be there. Could you split that part of this PR out so that we can expedite getting that fixed?

[ggdouglas]

Is it problematic that we now can pass both aria-labelledby and label to this component? Take the following example:

<label id="external-label">My Label</label>
<RadioGroup
    label={<label id="prop-node-label">Determine lunch</label>}
    aria-labelledby="external-label"
    ...
>
    <Radio label="Soup" value="one" />
    <Radio label="Salad" value="two" />
    <Radio label="Sandwich" value="three" />
</RadioGroup>

Which "label" should take precedence?

Furthermore, we can theoretically achieve the proper aria labeling by passing in a label manually.

<RadioGroup
    aria-labelledby="my-label"
    ...
>
    <Label id="my-label">My Label</Label>
    <Radio label="Soup" value="one" />
    <Radio label="Salad" value="two" />
    <Radio label="Sandwich" value="three" />
</RadioGroup>

IMO, the functionality of the label prop itself seems a bit ambiguous for this case. Perhaps it would ultimately be better if <RadioGroup> did away with this prop and instead associated any <Label> components passed as children with the radio group.

[bvandercar-vt]

Is it problematic that we now can pass both aria-labelledby and label to this component?

No, this allows a consumer to pass a custom aria-labelledby if they wish to use an external label.

Which "label" should take precedence?

In your example, external-label takes precedence because the consumer intentionally passed the aria-labelledby prop. which is exactly the way they should do it if they want an external label. The internal label no longer labels it to a screenreader, but that's exactly what they wanted when they chose to pass aria-labelledby.

Furthermore, we can theoretically achieve the proper aria labeling by passing in a label manually.

Yes your second example is exactly what is happening. Via uniqueId. The code you wrote here is the code that it is.

IMO, the functionality of the label prop itself seems a bit ambiguous for this case.

I disagree, it's pretty clear as to what it does. It creates a label for the radiogroup.

and instead associated any components passed as children with the radio group.

You would really just want 1 label.

To summarize, this change keeps all the existing implementation.

[bvandercar-vt]

@ggdouglas looks like this PR has been forgotten about, can you take a look?