diff --git a/packages/@react-aria/overlays/src/ariaHideOutside.ts b/packages/@react-aria/overlays/src/ariaHideOutside.ts index efdd0c2a83f..07d350ef47e 100644 --- a/packages/@react-aria/overlays/src/ariaHideOutside.ts +++ b/packages/@react-aria/overlays/src/ariaHideOutside.ts @@ -11,7 +11,6 @@ */ import {getOwnerWindow} from '@react-aria/utils'; - const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype; interface AriaHideOutsideOptions { @@ -72,6 +71,7 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row". // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623). if ( + hiddenNodes.has(node) || visibleNodes.has(node) || (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') ) { @@ -136,7 +136,7 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt let observer = new MutationObserver(changes => { for (let change of changes) { - if (change.type !== 'childList' || change.addedNodes.length === 0) { + if (change.type !== 'childList') { continue; } diff --git a/packages/@react-aria/overlays/test/ariaHideOutside.test.js b/packages/@react-aria/overlays/test/ariaHideOutside.test.js index 2a9f610f4c2..be0196cb5e3 100644 --- a/packages/@react-aria/overlays/test/ariaHideOutside.test.js +++ b/packages/@react-aria/overlays/test/ariaHideOutside.test.js @@ -10,9 +10,9 @@ * governing permissions and limitations under the License. */ +import {act, render, waitFor} from '@react-spectrum/test-utils-internal'; import {ariaHideOutside} from '../src'; -import React from 'react'; -import {render, waitFor} from '@react-spectrum/test-utils-internal'; +import React, {useState} from 'react'; describe('ariaHideOutside', function () { it('should hide everything except the provided element [button]', function () { @@ -354,10 +354,13 @@ describe('ariaHideOutside', function () { }); it('should hide everything except the provided element [row]', function () { - let {getAllByRole} = render( + let {getAllByRole, getByTestId} = render(
-
Cell 1
+
+ + Cell 1 +
Cell 2
@@ -367,6 +370,7 @@ describe('ariaHideOutside', function () { let cells = getAllByRole('gridcell'); let rows = getAllByRole('row'); + let span = getByTestId('test-span'); let revert = ariaHideOutside([rows[1]]); @@ -374,6 +378,7 @@ describe('ariaHideOutside', function () { // for https://bugs.webkit.org/show_bug.cgi?id=222623 expect(rows[0]).toHaveAttribute('aria-hidden', 'true'); expect(cells[0]).toHaveAttribute('aria-hidden', 'true'); + expect(span).not.toHaveAttribute('aria-hidden'); expect(rows[1]).not.toHaveAttribute('aria-hidden', 'true'); expect(cells[1]).not.toHaveAttribute('aria-hidden', 'true'); @@ -383,5 +388,47 @@ describe('ariaHideOutside', function () { expect(cells[0]).not.toHaveAttribute('aria-hidden', 'true'); expect(rows[1]).not.toHaveAttribute('aria-hidden', 'true'); expect(cells[1]).not.toHaveAttribute('aria-hidden', 'true'); + expect(span).not.toHaveAttribute('aria-hidden'); + }); + + it('should unhide after item reorder', async function () { + function Item(props) { + return ( +
+
+
+
+
+ ); + } + + function Test() { + let [count, setCount] = useState(0); + let items = ['row1', 'row2', 'row3', 'row4', 'row5']; + if (count === 1) { + items = ['row2', 'row3', 'row4', 'row5', 'row1']; + } + + return ( + <> + + {items.map((item) => )} + + + ); + } + + let {getByRole, getByTestId} = render( + + ); + + let button = getByRole('button'); + let row = getByTestId('row1'); + let revert = ariaHideOutside([button]); + + act(() => button.click()); + await Promise.resolve(); + revert(); + expect(row).not.toHaveAttribute('aria-hidden', 'true'); }); });