fix: no automatic accessible name on RadioGroup when label provided

[m-akinc]

🐛 Bug Report

Radio group does not automatically associate label with host control. I.e. if a user creates a radio group element, and provides a label element in it, the accessibility node for the radio group does not have the name from the label.

💻 Repro or Code Sample

N/A

🤔 Expected Behavior

The user should not have to create the association between the label and the radio group.

😯 Current Behavior

Because the user must provide the label that gets slotted into the "label" slot, the template doesn't/can't create an association (e.g. via aria-labelledby or the label's for attribute) between it and the radio group element. The user has to set IDs and the aforementioned attributes to create the association. If they do not do this, the radio group element in the accessibility tree will not have the name from the label.

💁 Possible Solution

Instead of having a slot that is meant to hold a label, put a label element directly in the radio group template, with a slot inside of it. Users can provide a div/span with the label content instead of a label. Also, add a top-level, wrapping div to the template. The top-level div can then have an aria-labelledby attribute that references the label element. This would save the user from having to set this themselves.

🔦 Context

We are trying to add the radio group to our design system, and we want it to have an accessible name without the user having to think about it / do it themselves.

🌍 Your Environment

N/A