Radiobutton component should render with only one label

Following the comment in the PR #1359 The radiobutton are mounting with two label thus throwing an wcag2 exception where a form element needs to have only one label. Having more then one label may confuses the screen readers.

<label className={classes}>
     <input {...props} className={`${CLASS_ROOT}__input`}
          type="radio" />
     <span className={`${CLASS_ROOT}__control`} />
     <label htmlFor={props.id} className={`${CLASS_ROOT}__label`}>
            {label}
      </label>
</label>

Expected Behavior

The radio input should render with one label attach to it.

Actual Behavior

The radio input currently have two label, causing accessibility issues.

URL, screen shot, or Codepen exhibiting the issue

With the use of react-axe in my project, I was able to notice the issue. The issue is display as follow:

https://dequeuniversity.com/rules/axe/2.3/label?application=axeAPI

Your Environment

• Grommet version: 1.5.0
• react-axe: 2.1.7

[alansouzati]

fixed by https://github.com/grommet/grommet/pull/1443

Thanks again @jlevesque

[RyanCCollins]

Hey @jlevesque ! Great catch! It is definitely a goal of Grommet’s to be accessible and we take violations of the WCAG audit seriously. I will leave this up for now so that we can get it on our backlog. That said, if you feel compelled to try to help us resolve this, we would love for you to work on a PR!