diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx index b52a6a208ad..242a53af828 100644 --- a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx +++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx @@ -218,7 +218,7 @@ describe('useCheckboxGroup', () => { expect(checkboxes[0]).not.toHaveAttribute('disabled'); }); - it('sets readOnly on each checkbox', () => { + it('sets aria-readonly="true" on each checkbox', () => { let {getAllByRole} = render( { ); let checkboxes = getAllByRole('checkbox') as HTMLInputElement[]; - expect(checkboxes[0]).toHaveAttribute('readonly'); - expect(checkboxes[0]).toHaveAttribute('readonly'); - expect(checkboxes[0]).toHaveAttribute('readonly'); + expect(checkboxes[0]).toHaveAttribute('aria-readonly', 'true'); + expect(checkboxes[1]).toHaveAttribute('aria-readonly', 'true'); + expect(checkboxes[2]).toHaveAttribute('aria-readonly', 'true'); }); it('should not update state for readonly checkbox', () => { diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts index ce4dbbb1a00..0d71e34f539 100644 --- a/packages/@react-aria/radio/src/useRadio.ts +++ b/packages/@react-aria/radio/src/useRadio.ts @@ -86,7 +86,7 @@ export function useRadio(props: RadioAriaProps, state: RadioGroupState, ref: Ref name: radioGroupNames.get(state), tabIndex, disabled: isDisabled, - readOnly: isReadOnly, + 'aria-readonly': isReadOnly || undefined, required: isRequired, checked, value, diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts index 743dfee410c..4b43e34721f 100644 --- a/packages/@react-aria/toggle/src/useToggle.ts +++ b/packages/@react-aria/toggle/src/useToggle.ts @@ -67,10 +67,10 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb 'aria-invalid': validationState === 'invalid' || undefined, 'aria-errormessage': props['aria-errormessage'], 'aria-controls': props['aria-controls'], + 'aria-readonly': isReadOnly || undefined, onChange, disabled: isDisabled, required: isRequired, - readOnly: isReadOnly, value, name, type: 'checkbox', diff --git a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js index 37b4df3525f..5823b43fb2c 100644 --- a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js +++ b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js @@ -197,7 +197,7 @@ describe('CheckboxGroup', () => { expect(checkboxes[2]).not.toHaveAttribute('disabled'); }); - it('sets readOnly on each checkbox', () => { + it('sets aria-readonly="true" on each checkbox', () => { let {getAllByRole} = render( @@ -209,9 +209,9 @@ describe('CheckboxGroup', () => { ); let checkboxes = getAllByRole('checkbox'); - expect(checkboxes[0]).toHaveAttribute('readonly'); - expect(checkboxes[1]).toHaveAttribute('readonly'); - expect(checkboxes[2]).toHaveAttribute('readonly'); + expect(checkboxes[0]).toHaveAttribute('aria-readonly', 'true'); + expect(checkboxes[1]).toHaveAttribute('aria-readonly', 'true'); + expect(checkboxes[2]).toHaveAttribute('aria-readonly', 'true'); }); it('should not update state for readonly checkbox', () => { diff --git a/packages/@react-spectrum/provider/test/Provider.test.js b/packages/@react-spectrum/provider/test/Provider.test.js index 4906111393d..301db44f65b 100644 --- a/packages/@react-spectrum/provider/test/Provider.test.js +++ b/packages/@react-spectrum/provider/test/Provider.test.js @@ -74,8 +74,8 @@ describe('Provider', () => { let checkbox = getByLabelText('Test Checkbox'); let switchComponent = getByLabelText('Test Switch'); - expect(switchComponent).toHaveAttribute('readonly'); - expect(checkbox).toHaveAttribute('readonly'); + expect(switchComponent).toHaveAttribute('aria-readonly', 'true'); + expect(checkbox).toHaveAttribute('aria-readonly', 'true'); act(() => { userEvent.click(checkbox); diff --git a/packages/@react-spectrum/radio/test/Radio.test.js b/packages/@react-spectrum/radio/test/Radio.test.js index 38fa86efc1f..aaa103ba260 100644 --- a/packages/@react-spectrum/radio/test/Radio.test.js +++ b/packages/@react-spectrum/radio/test/Radio.test.js @@ -272,9 +272,9 @@ describe('Radios', function () { let radios = getAllByRole('radio'); expect(radioGroup).toBeTruthy(); expect(radios.length).toBe(3); - expect(radios[0]).toHaveAttribute('readonly'); - expect(radios[1]).toHaveAttribute('readonly'); - expect(radios[2]).toHaveAttribute('readonly'); + expect(radios[0]).toHaveAttribute('aria-readonly', 'true'); + expect(radios[1]).toHaveAttribute('aria-readonly', 'true'); + expect(radios[2]).toHaveAttribute('aria-readonly', 'true'); let cats = getByLabelText('Cats'); userEvent.click(cats);