diff --git a/packages/react-aria/src/overlays/ariaHideOutside.ts b/packages/react-aria/src/overlays/ariaHideOutside.ts index 66cc828ad2c..543e51127be 100644 --- a/packages/react-aria/src/overlays/ariaHideOutside.ts +++ b/packages/react-aria/src/overlays/ariaHideOutside.ts @@ -50,7 +50,7 @@ let observerStack: Array = []; export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOptions | Element) { let windowObj = getOwnerWindow(targets?.[0]); let opts = options instanceof windowObj.Element ? {root: options} : options; - let root = opts?.root ?? document.body; + let root = opts?.root ?? windowObj.document.body; let shouldUseInert = opts?.shouldUseInert && supportsInert; let visibleNodes = new Set(targets); let hiddenNodes = new Set(); diff --git a/packages/react-aria/test/overlays/ariaHideOutside.test.js b/packages/react-aria/test/overlays/ariaHideOutside.test.js index 737d8b8d4d9..abac6d02d90 100644 --- a/packages/react-aria/test/overlays/ariaHideOutside.test.js +++ b/packages/react-aria/test/overlays/ariaHideOutside.test.js @@ -49,6 +49,30 @@ describe('ariaHideOutside', function () { expect(() => getByRole('button')).not.toThrow(); }); + it('should use the target document as the default root', function () { + let iframe = document.createElement('iframe'); + let iframeSibling = document.createElement('div'); + document.body.appendChild(iframe); + document.body.appendChild(iframeSibling); + let iframeDocument = iframe.contentWindow.document; + iframeDocument.body.innerHTML = '
'; + let target = iframeDocument.getElementById('target'); + let outside = iframeDocument.getElementById('outside'); + + let revert = ariaHideOutside([target]); + + expect(outside).toHaveAttribute('aria-hidden', 'true'); + expect(target).not.toHaveAttribute('aria-hidden'); + expect(iframe).not.toHaveAttribute('aria-hidden'); + expect(iframeSibling).not.toHaveAttribute('aria-hidden'); + expect(document.body).not.toHaveAttribute('aria-hidden'); + + revert(); + expect(outside).not.toHaveAttribute('aria-hidden'); + iframe.remove(); + iframeSibling.remove(); + }); + it('should hide everything except multiple elements', function () { let {getByRole, getAllByRole, queryByRole, queryAllByRole} = render( <>