Disabling Radio FormControl in RadioGroup results in axe violation

[calvinchilds]

Description

To disable a certain Radio button in a RadioGroup of FormControls, you need to set the disabled prop on the FormControl element of the radio option. If you do, you get the following axe violation

helpers.ts:37 [Critical] [aria-disabled] may be used in place of native HTML [disabled] to allow tab-focus on an otherwise ignored element. Setting both attributes is contradictory.

https://www.w3.org/TR/html-aria/#docconformance-attr

When you inspect the element in the DOM it indeed has both disabled and aria-disabled="true" HTML attributes.

Steps to reproduce

Render this JSX:

<RadioGroup name="options">
  <RadioGroup.Label>Options</RadioGroup.Label>
  <FormControl>
    <Radio value="option1" />
    <FormControl.Label>Option 1</FormControl.Label>
  </FormControl>
  <FormControl disabled>
    <Radio value="option2" />
    <FormControl.Label>Option 2</FormControl.Label>
  </FormControl>
</RadioGroup>

Version

35.14.2

Browser

Chrome

[joshblack]

Hi there @calvinchilds! 👋

Thanks for taking the time to make this bug report 🙏 Could you share more info around how you're seeing that violation from axe? I couldn't seem to get it to show up when using the devtools or running it locally and was curious if I'm missing anything specific 🤔 Want to make sure we're testing against when making the fix so this doesn't regress in the future. Thanks again!