adobe / adobe/react-spectrum

`ariaHideOutside` keeps dynamically added content hidden when follow-up ariaHideOutside is called inside it

Open
#8,268 7 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

I have a case where I need to render some stuff in a portal before adding an actual dialog there.

Before the element was rendered together with calling `ariaHideOutside` which caused the old MutationObserver to stop observing before the element was added which was working as expected.

I think it's best explained in a test I wrote for `ariaHideOutside.test.js`

### 🤔 Expected Behavior?

The element (and its subtree) that `ariaHideOutside` is called on should be the only element that is not hidden from a11y tree. No matter if other elements have been hidden by `ariaHideOutside` before

### 😯 Current Behavior

Now that I added some element that always renders in a portal even if the dialog is not open it's behind aria-hidden and the `ariaHideOutside` called on the modal is not removing `aria-hidden` attribute

### 💁 Possible Solution

Maybe we could call revert on the previous `ariaHideOutside` call before applying the new `ariaHideOutside`. I'm open to working on this

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

```jsx
it('should remove aria-hidden from dynamically added content when follow-up ariaHideOutside is called inside that dynamically added content', async function () {
let Test = props => (
<>

{props.show &&


Button
}

);

let {getByRole, getByTestId, queryByRole, rerender} = render();

let checkbox = getByRole('checkbox');
let revert = ariaHideOutside([checkbox]);

rerender();
// Wait for mutation observer tick
await Promise.resolve();

let section = getByTestId('test');
let button = getByRole('button', {hidden: true});

expect(checkbox).not.toHaveAttribute('aria-hidden', 'true');
expect(section).toHaveAttribute('aria-hidden', 'true');

expect(queryByRole('checkbox')).not.toBeNull();
expect(queryByRole('button')).toBeNull();

let revert2 = ariaHideOutside([button]);

expect(checkbox).toHaveAttribute('aria-hidden');
expect(section).not.toHaveAttribute('aria-hidden');

expect(queryByRole('checkbox')).toBeNull();
expect(queryByRole('button')).not.toBeNull();

revert();
revert2();

expect(checkbox).not.toHaveAttribute('aria-hidden');
expect(section).not.toHaveAttribute('aria-hidden');

expect(queryByRole('checkbox')).not.toBeNull();
expect(queryByRole('button')).not.toBeNull();
});
```

### Version

3.40.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

ChiliPiper

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.