add aria-disabled to RadioGroup Options (#543)

* add aria-disabled to RadioGroup Options

This will happen when:
- The RadioGroup is disabled
- The RadioGroup Option is disabled

Closes: #515

* update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added 
 
 - Ensure that you can use `Transition.Child` when using implicit Transitions ([#503](https://github.com/tailwindlabs/headlessui/pull/503))
+- Add `aria-disabled` on disabled `RadioGroup.Option` components ([#543](https://github.com/tailwindlabs/headlessui/pull/543))
 
 ### Fixes
 
@@ -20,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added 
 
 - Ensure that you can use `TransitionChild` when using implicit Transitions ([#503](https://github.com/tailwindlabs/headlessui/pull/503))
+- Add `aria-disabled` on disabled `RadioGroup.Option` components ([#543](https://github.com/tailwindlabs/headlessui/pull/543))
 
 ### Fixes
 

packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx

@@ -177,6 +177,11 @@ describe('Rendering', () => {
     // Make sure that the onChange handler never got called
     expect(changeFn).toHaveBeenCalledTimes(0)
 
+    // Make sure that all the options get an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) expect(option).toHaveAttribute('aria-disabled', 'true')
+
     // Toggle the disabled state
     await click(getByText('Toggle'))
 
@@ -234,6 +239,17 @@ describe('Rendering', () => {
     // Make sure that the onChange handler never got called
     expect(changeFn).toHaveBeenCalledTimes(0)
 
+    // Make sure that the option with value "render-prop" gets an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) {
+      if (option.dataset.value) {
+        expect(option).toHaveAttribute('aria-disabled', 'true')
+      } else {
+        expect(option).not.toHaveAttribute('aria-disabled')
+      }
+    }
+
     // Toggle the disabled state
     await click(getByText('Toggle'))
 

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -352,6 +352,7 @@ function Option<
     'aria-checked': checked ? 'true' : 'false',
     'aria-labelledby': labelledby,
     'aria-describedby': describedby,
+    'aria-disabled': isDisabled ? true : undefined,
     tabIndex: (() => {
       if (isDisabled) return -1
       if (checked) return 0

packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts

@@ -358,6 +358,11 @@ describe('Rendering', () => {
     // Make sure that the onChange handler never got called
     expect(changeFn).toHaveBeenCalledTimes(0)
 
+    // Make sure that all the options get an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) expect(option).toHaveAttribute('aria-disabled', 'true')
+
     // Toggle the disabled state
     await click(getByText('Toggle'))
 
@@ -420,6 +425,17 @@ describe('Rendering', () => {
     // Make sure that the onChange handler never got called
     expect(changeFn).toHaveBeenCalledTimes(0)
 
+    // Make sure that the option with value "render-prop" gets an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) {
+      if (option.dataset.value) {
+        expect(option).toHaveAttribute('aria-disabled', 'true')
+      } else {
+        expect(option).not.toHaveAttribute('aria-disabled')
+      }
+    }
+
     // Toggle the disabled state
     await click(getByText('Toggle'))
 

packages/@headlessui-vue/src/components/radio-group/radio-group.ts

@@ -259,6 +259,7 @@ export let RadioGroupOption = defineComponent({
       'aria-checked': this.checked ? 'true' : 'false',
       'aria-labelledby': this.labelledby,
       'aria-describedby': this.describedby,
+      'aria-disabled': this.disabled ? true : undefined,
       tabIndex: this.tabIndex,
       onClick: this.disabled ? undefined : this.handleClick,
       onFocus: this.disabled ? undefined : this.handleFocus,