Fix 1413 - Remove readonly from radio and checkboxes. Use aria-readonly instead. (#1414)

Author: intergalacticspacehighway

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(
       <CheckboxGroup
         groupProps={{label: 'Favorite Pet', isReadOnly: true}}
@@ -230,9 +230,9 @@ describe('useCheckboxGroup', () => {
     );
 
     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', () => {

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,

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',

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(
       <Provider theme={theme}>
         <CheckboxGroup label="Favorite Pet" isReadOnly>
@@ -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', () => {

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);

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);