Update the RadioControl header design

[jarekmorawski]

There's a new design for displaying help text for the itemGroup component introduced as part of #63490, which repositions the help text to align with the item labels. This makes the itemGroup's help text look off because it stands out from other help texts. This dissonance is particularly visible when the last item in the group has a help text.

I propose moving the itemGroup's help text to the top, similar to the form section heading. This will clean up the UI and make referring to the help text easier while scanning longer item lists.

The new layout doesn't work with the current heading style, so we can take this opportunity to update that, too. Ideally, these changes would apply to all UI control groups: radio, checkboxes, toggles, etc.

[jameskoster]

Moving the help text associated with a radio group above the set of options seems reasonable to me, especially if we enable the addition of per-radio help text. I'd appreciate a11y feedback on this though.

I reckon we should use existing type styles for now. Most of the mockup is fine, but the 14/24 heading isn't a style I've seen used elsewhere. The 13px, 500 weight style we use in panel headings is probably fine?

I removed the Needs Dev label until we get some feedback on the a11y impact.

[jarekmorawski]

I reckon we should use existing type styles for now. Most of the mockup is fine, but the 14/24 heading isn't a style I've seen used elsewhere. The 13px, 500 weight style we use in panel headings is probably fine?

Good catch! I used the new wp-admin styles, but we should definitely use an existing style. The one we use for the panel headings looks good. I updated the OG post.

[joedolson]

The position of the help text is probably improved slightly by being at the top of the panel. However, the lack of any semantic connection between the help text, heading, and the fields isn't great. Properly speaking, groups of radio buttons should be joined inside a fieldset with legend, or a container with role="group" and an aria-labelledby attribute pointing to the heading.

The aria-labelledby target could probably contain both the heading and the help text.

[jameskoster]

We should use the new type tokens for the text styling but otherwise I think this is good to go.