`ariaHideOutside` keeps dynamically added content hidden when follow-up ariaHideOutside is called inside it
- 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
Assessment
This issue has not been assessed yet.