fix(react-aria-components): pass overlay id to PopoverContext in DialogTrigger (#9800)

Author: albertdugba

packages/@react-aria/test-utils/src/dialog.ts

@@ -82,7 +82,9 @@ export class DialogTester {
           if (!dialogId || document.getElementById(dialogId) == null) {
             throw new Error(`Dialog with id of ${dialogId} not found in document.`);
           } else {
-            this._dialog = document.getElementById(dialogId)!;
+            let el = document.getElementById(dialogId)!;
+            let nestedDialog = el.querySelector('[role=dialog], [role=alertdialog]');
+            this._dialog = nestedDialog as HTMLElement || el;
             return true;
           }
         });

packages/react-aria-components/src/Dialog.tsx

@@ -78,10 +78,11 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
       values={[
         [OverlayTriggerStateContext, state],
         [RootMenuTriggerStateContext, state],
-        [DialogContext, overlayProps],
+        [DialogContext, {...overlayProps, id: undefined}],
         [PopoverContext, {
           trigger: 'DialogTrigger',
           triggerRef: buttonRef,
+          id: overlayProps.id,
           'aria-labelledby': overlayProps['aria-labelledby'],
           style: {'--trigger-width': buttonWidth} as React.CSSProperties
         }]

packages/react-aria-components/src/Popover.tsx

@@ -94,6 +94,7 @@ export interface PopoverRenderProps {
 }
 
 interface PopoverContextValue extends PopoverProps {
+  id?: string,
   /** Contexts to clear. */
   clearContexts?: Context<any>[]
 }

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

@@ -52,6 +52,10 @@ describe('Popover', () => {
     expect(dialog).toBeInTheDocument();
     expect(dialog.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'DialogTrigger');
 
+    let popover = dialog.closest('.react-aria-Popover');
+    expect(button).toHaveAttribute('aria-controls');
+    expect(popover).toHaveAttribute('id', button.getAttribute('aria-controls'));
+
     await user.click(document.body);
 
     expect(dialog).not.toBeInTheDocument();