RadioGroup is not disabled when inside a disabled fieldset

[ragulka]

What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

For example: v1.6.7

What browser are you using?

For example: Chrome

Reproduction URL

https://codesandbox.io/s/headlessui-vue-radiogroup-example-ld00r2?file=/src/App.vue

Describe your issue

When using a FormGroup inside a disabled fieldset, the FormGroup is not automatically disabled.

From W3C Recommendations for HTML5: "The disabled attribute, when specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled."

A similar issue was reported for Switch and it was fixed a while ago. However, this seems to be a separate issue, and it could possibly apply to other form elements provided by HeadlessUI as well (I have not tested them, yet).

[thecrypticace]

The default element for a RadioGroupOption is a div. Unfortunately changing this to a button would be a breaking change. However, I did notice that you are customizing your set up anyway and rendering it with as="template" and a child <div>. If you change this

to a button and add the classes w-full text-left to the button it'll look the same but inherit the correct behavior of disabling the option which is the behavior your after.

We'll add a note to the code to revisit this when we're able to make a breaking change.