diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx index 2091109092a..dea849e4f08 100644 --- a/packages/react-aria-components/src/Dialog.tsx +++ b/packages/react-aria-components/src/Dialog.tsx @@ -82,6 +82,7 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element { [PopoverContext, { trigger: 'DialogTrigger', triggerRef: buttonRef, + id: overlayProps.id, 'aria-labelledby': overlayProps['aria-labelledby'], style: {'--trigger-width': buttonWidth} as React.CSSProperties }] diff --git a/packages/react-aria-components/test/Popover.test.js b/packages/react-aria-components/test/Popover.test.js index 2d8e288a65c..1ad00a7cc6d 100644 --- a/packages/react-aria-components/test/Popover.test.js +++ b/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();