diff --git a/packages/radix-vue/src/Checkbox/Checkbox.test.ts b/packages/radix-vue/src/Checkbox/Checkbox.test.ts index 9109d7508..6acdd524e 100644 --- a/packages/radix-vue/src/Checkbox/Checkbox.test.ts +++ b/packages/radix-vue/src/Checkbox/Checkbox.test.ts @@ -80,6 +80,18 @@ describe('given a disabled Checkbox', () => { }) }) +describe('given a required Checkbox', () => { + const wrapper = mount({ + components: { Checkbox }, + template: '
', + }) + + it('should have [aria-required] of "true"', () => { + expect(wrapper.find('button').attributes('aria-required')).toEqual('true') + expect(wrapper.find('[type="checkbox"]').attributes('required')).toBeDefined() + }) +}) + describe('given checked value as "indeterminate"', async () => { const wrapper = mount(Checkbox, { props: { checked: 'indeterminate' } }) diff --git a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue index fb21933bd..c71c02b5c 100644 --- a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue +++ b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue @@ -91,7 +91,7 @@ provideCheckboxRootContext({ :as="as" :type="as === 'button' ? 'button' : undefined" :aria-checked="isIndeterminate(checked) ? 'mixed' : checked" - :aria-required="false" + :aria-required="props.required" :aria-label="$attrs['aria-label'] || ariaLabel" :data-state="getState(checked)" :data-disabled="disabled ? '' : undefined"