[web] Workaround for removing aria-hidden leftovers

[dgdavid]

Problem

When an isOpen={true} PF4/Modal is unmounted instead of set as isOpen={false}, its siblings remain as aria-hidden. To know more, read following links

• fix(Modal): remove aria-hidden from siblings when unmounting the component patternfly/patternfly-react#9096, the fix sent to upstream

• Bug - Modal - aria-hidden is not removed after closing modal-based form patternfly/patternfly-react#8925, the issue already reported to upstream by someone else

• [web] Blur and grayscale aria-hidden and inert div nodes #564, the RFC where we were aware about the issue

• [PoC]: Stop rendering unmounting modals directly #576, an attempt to see how difficult it would be to stop unmounting these dialogs and switch them to their close state instead.

  • There is a collision issue when more than one modal is mounted in the same parent component: in each parent state change, the re-rendering process will trigger their componentDidUpdate method which is directly manipulating the DOM. Thus, the first dialog rendered as open adds the aria-hidden attribute to its siblings but subsequent not open dialogs will remove the same attribute from the same siblings.

We have been told by the Patternfly team that the patternfly-react repo is code frozen and the fix will be reviewed for the next release, in Q3 at the earliest.

Solution

To use a workaround meanwhile: removing the aria-hidden attributes from the document.body children when the Agama/Popup will be unmounted.

Why not using a ref to ask for its siblings instead, as we did in #572 for the similar behavior of the Sidebar? Because PF4/Modal does not forward the ref. Read https://react.dev/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes

There are other tricky ways to workaround the issue (such as looking for the element with backdrop open CSS class 😵 😶), but since Agama is not using the appendTo PF4/Modal prop it is enough removing the attribute from the default target children.

Testing

• Added a new unit test
• Tested manually

Screenshots

N/A

[github-actions]

Pull Request Test Coverage Report for Build 5005255927

• 4 of 4 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.01%) to 74.706%

---

Totals
Change from base Build 4993079353:	0.01%
Covered Lines:	5056
Relevant Lines:	6529

---

💛 - Coveralls

[ancorgs]

LGTM