[RAC] fix: Propagate isDisabled prop from DatePicker to popover Button (#5411)

* fix: Propagate isDisabled prop from DatePicker to popover Button

* Update packages/@react-aria/datepicker/src/useDatePicker.ts

Co-authored-by: Robert Snow <snowystinger@gmail.com>

* remove: unnecessary props

* fix: lint

---------

Co-authored-by: Robert Snow <snowystinger@gmail.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>

Author: 3 people

packages/@react-aria/datepicker/src/useDatePicker.ts

@@ -147,6 +147,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       'aria-labelledby': `${buttonId} ${labelledBy}`,
       'aria-describedby': ariaDescribedBy,
       'aria-expanded': state.isOpen,
+      isDisabled: props.isDisabled || props.isReadOnly,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {

packages/@react-spectrum/datepicker/src/DatePicker.tsx

@@ -45,7 +45,6 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     autoFocus,
     isQuiet,
     isDisabled,
-    isReadOnly,
     placeholderValue,
     maxVisibleMonths = 1,
     pageBehavior
@@ -156,8 +155,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
             {...mergeProps(buttonProps, focusPropsButton)}
             UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}
             isQuiet={isQuiet}
-            validationState={validationState}
-            isDisabled={isDisabled || isReadOnly}>
+            validationState={validationState}>
             <CalendarIcon />
           </FieldButton>
           <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>

packages/react-aria-components/test/DatePicker.test.js

@@ -255,4 +255,19 @@ describe('DatePicker', () => {
     await user.click(selected.nextSibling.children[0]);
     expect(dialog).toBeInTheDocument();
   });
+
+  it('should disable button and date input when DatePicker is disabled', () => {
+    let {getByRole} = render(<TestDatePicker isDisabled />);
+
+    let button = getByRole('button');
+    expect(button).toBeDisabled();
+
+    let group = getByRole('group');
+    expect(group).toHaveAttribute('aria-disabled', 'true');
+
+    let spinbuttons = within(group).getAllByRole('spinbutton');
+    for (let spinbutton of spinbuttons) {
+      expect(spinbutton).toHaveAttribute('aria-disabled', 'true');
+    }
+  });
 });