Allow React Components as label in RadioControl Options for Enhanced Customization

[retrofox]

In some cases, we'd like to pass not only a string to the label property of the options item.
Consider the following one:

<RadioControl
  options={[
    {
      label: <Rating value={ 4 } />
      value: '4'
    },
    //...
  ]}
  // ...
/>

...to render something like...

Questions:

1. Should the label accept a React Component Instead of a String?

Allowing label to accept a React component could enable richer, more flexible user interfaces. This would be particularly useful for custom icons, rating displays, or other visual indicators.

2. Accessibility Concerns

Labels in RadioControl are simple strings, which are generally straightforward to manage for screen readers. Allowing components might introduce accessibility issues. How can we deal with the a11y?

So, I'd like your opinion on addressing this issue before I start digging into a tentative implementation.

cc @WordPress/gutenberg-components

[mirka]

I think I'm ok with allowing ReactNode as an option label, given that:

1. We stop using the <label> element, and associate the input with aria-labelledby instead. This is because <label> elements only allow phrasing content, and I can easily imagine a consumer passing a div and ending up with invalid HTML.

   gutenberg/packages/components/src/radio-control/index.tsx

   Lines 126 to 131 in e62588a

   	<label
   	className="components-radio-control__label"
   	htmlFor={ generateOptionId( id, index ) }
   	>
   	{ option.label }
   	</label>

2. We have clear documentation on the accessibility requirements when passing arbitrary elements as a label.

See also BaseControl as a construct that allows ReactNode as a label.

Let's wait for some other opinions as well.

[mirka]

@ciampo ☝️ Can I get a second opinion on this?

[ciampo]

@mirka your comment above makes sense.

Widening the type to accept any ReactNode definitely makes the component more flexible, but it also makes consumers of the component responsible for providing an accessible label.

I'm ok exploring the changes that you suggested (changing the type to ReactNode, switching from <label> to aria-labelledby, improving docs). At the same, I continue to think that we should also improve linting and testing to make sure that components are properly labelled