From e87cf72b6173fb22b37ecce0d466b10f78374702 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 19 May 2021 12:20:07 +0200 Subject: [PATCH] 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 | 2 ++ .../components/radio-group/radio-group.test.tsx | 16 ++++++++++++++++ .../src/components/radio-group/radio-group.tsx | 1 + .../components/radio-group/radio-group.test.ts | 16 ++++++++++++++++ .../src/components/radio-group/radio-group.ts | 1 + 5 files changed, 36 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f720649a1a..569a00305a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx index 0509a88174..830abe8027 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx +++ b/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')) diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx index f92891e8f1..b65bb64a8a 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx +++ b/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 diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts index 88ea7c0268..f6aad37c01 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts +++ b/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')) diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts index 0bbaf2acbb..0c3b05b74e 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts +++ b/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,