RadioGroupItem shouldn't use a Stardust Label component

[codepretty]

Bug Report

The RadioGroupItem shouldn't use a Stardust Label component, it should use an html for it's items.

Do we need an input for accessibility?

<input name="aaa" type="radio" />
<label for="aaa">

</label>

[jurokapsiar]

Agree that the Label component probably should not be used, we might just render a . But the DOM structure described in the issue is not what we are intending to do. We are following ARIA Radio pattern with roving tabindex (example https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html), not the and combination since it is not possible to style the properly to apply the custom Stardust look.

Some people are visually hiding the with opacity and are styling the parent div, but that does not work correctly for some screen readers.

[bmdalex]

@codepretty @jurokapsiar

Right now we render something like this for a RadioGroupItem

<div class="ui-radiogroup__item"> <!-- root -->
  <span class="ui-label"> <!-- Label component, replace with what? -->
    <span class="ui-icon"></span> <!-- Icon component for the radio - changes needed? -->
    <span>Capricciosa</span> <!-- regular span for text - changes needed? -->
  </span>
</div>

What is the resolution on this one so fix the issue but still follow ARIA pattern? Let's have some proposals 😃

[codepretty]

I think because the aria roles exist on the outer html structure, we can just convert the Label to using something like span (or maybe div if we can't have things like an input inside a span).

<div role="radiogroup">
    <div role="radio" tabindex="0" aria-checked="true" aria-disabled="false">
        <span>... radio group item 1 goes here ... </span>
    </div>
    <div role="radio" tabindex="-1" aria-checked="false" aria-disabled="false">
        <span>... radio group item 2 goes here ... </span>
    </div>
</div>

does that seem right to you @jurokapsiar ?

[jurokapsiar]

agree, label and icon can be in the <div role="radio">. But we will need to tests that once the PR is available.