Provider shouldn't disable buttons inside dialogs (#3587)

ContextualHelp dialog button should not be disabled by outer provider, such as Form

Author: snowystinger

packages/@react-spectrum/form/test/Form.test.js

@@ -10,17 +10,31 @@
  * governing permissions and limitations under the License.
  */
 
+import {act} from 'react-dom/test-utils';
 import {Button} from '@react-spectrum/button';
+import {Content, Header} from '@react-spectrum/view';
+import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
+import MatchMediaMock from 'jest-matchmedia-mock';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
+import {render, triggerPress} from '@react-spectrum/test-utils';
 import {TextField} from '@react-spectrum/textfield';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
+import {within} from '@testing-library/dom';
 
 describe('Form', function () {
+  let matchMedia;
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  beforeEach(() => {
+    matchMedia = new MatchMediaMock();
+  });
+
   it('should render a form', () => {
     let {getByRole} = render(
       <Provider theme={theme}>
@@ -183,5 +197,45 @@ describe('Form', function () {
       let form = getByRole('form');
       expect(form.elements['picker'].value).toEqual('one');
     });
+
+    it('contextual help should not be disabled nor should its dismiss button be disabled', () => {
+      matchMedia.useMediaQuery('(max-width: 700px)');
+
+      let {getByRole, getByLabelText} = render(
+        <Provider theme={theme}>
+          <Form aria-label="Test" isDisabled>
+            <Picker
+              name="picker"
+              defaultSelectedKey="one"
+              label="Test Picker"
+              contextualHelp={(
+                <ContextualHelp>
+                  <Header>What is it good for?</Header>
+                  <Content>Absolutely nothing.</Content>
+                </ContextualHelp>
+              )}>
+              <Item key="one">One</Item>
+              <Item key="two">Two</Item>
+              <Item key="three">Three</Item>
+            </Picker>
+          </Form>
+        </Provider>
+      );
+
+      let button = getByLabelText('Help');
+      triggerPress(button);
+
+      let dialog = getByRole('dialog');
+      userEvent.tab();
+
+      let dismissButton = within(dialog).getByRole('button');
+      expect(document.activeElement).toBe(dismissButton);
+
+      triggerPress(dismissButton);
+      act(() => {jest.runAllTimers();});
+      act(() => {jest.runAllTimers();});
+
+      expect(document.activeElement).toBe(button);
+    });
   });
 });

packages/@react-spectrum/overlays/src/Overlay.tsx

@@ -43,7 +43,7 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
   }
 
   let contents = (
-    <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}}>
+    <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>
       <OpenTransition
         in={isOpen}
         appear