From 1d0a941e2e772986d94bd2706d6c01186094f6d4 Mon Sep 17 00:00:00 2001
From: Joachim <jschuler@redhat.com>
Date: Wed, 19 Dec 2018 12:06:19 -0500
Subject: [PATCH] fix(modal): rename reactRoot to srHide and add to ts file
 (#1098)

* fix(modal): rename reactRoot to srHide and add to ts file

* remove need for reactRoot/srHide prop

* update test
---
 .../react-core/src/components/Modal/Modal.js  | 19 +++++++++++++------
 .../src/components/Modal/Modal.test.js        |  3 +--
 .../components/Modal/examples/LargeModal.js   |  2 --
 .../components/Modal/examples/SimpleModal.js  |  2 --
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.js
index abac2922e44..4c2867bece7 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/Modal.js
+++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.js
@@ -24,9 +24,7 @@ const propTypes = {
   /** A callback for when the close button is clicked */
   onClose: PropTypes.func,
   /** Creates a large version of the Modal */
-  isLarge: PropTypes.bool,
-  /** React application root element */
-  reactRoot: PropTypes.instanceOf(safeHTMLElement).isRequired
+  isLarge: PropTypes.bool
 };
 
 const defaultProps = {
@@ -52,6 +50,15 @@ class Modal extends React.Component {
     }
   };
 
+  toggleSiblingsFromScreenReaders = hide => {
+    const bodyChildren = document.body.children;
+    for (const child of bodyChildren) {
+      if (child !== this.container) {
+        hide ? child.setAttribute('aria-hidden', hide) : child.removeAttribute('aria-hidden');
+      }
+    }
+  };
+
   componentDidMount() {
     document.body.appendChild(this.container);
     document.addEventListener('keydown', this.handleEscKeyClick, false);
@@ -65,10 +72,10 @@ class Modal extends React.Component {
   componentDidUpdate() {
     if (this.props.isOpen) {
       document.body.classList.add(css(styles.backdropOpen));
-      this.props.reactRoot.setAttribute('aria-hidden', true);
+      this.toggleSiblingsFromScreenReaders(true);
     } else {
       document.body.classList.remove(css(styles.backdropOpen));
-      this.props.reactRoot.removeAttribute('aria-hidden');
+      this.toggleSiblingsFromScreenReaders(false);
     }
   }
 
@@ -78,7 +85,7 @@ class Modal extends React.Component {
   }
 
   render() {
-    const { reactRoot, ...props } = this.props;
+    const { ...props } = this.props;
 
     if (!canUseDOM) {
       return null;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js
index 10d5ccd5e1f..398b851c7ac 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js
+++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js
@@ -14,8 +14,7 @@ const props = {
   title: 'Modal',
   onClose: jest.fn(),
   isOpen: false,
-  children: 'modal content',
-  reactRoot: document.createElement('div')
+  children: 'modal content'
 };
 
 test('Modal creates a container element once for div', () => {
diff --git a/packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js b/packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js
index 2016952c83a..9a2a0d9ab90 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js
+++ b/packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js
@@ -14,7 +14,6 @@ class LargeModal extends React.Component {
 
   render() {
     const { isModalOpen } = this.state;
-    const reactRoot = typeof document !== 'undefined' ? document.querySelector('#___gatsby') : '';
 
     return (
       <React.Fragment>
@@ -34,7 +33,6 @@ class LargeModal extends React.Component {
               Confirm
             </Button>
           ]}
-          reactRoot={reactRoot}
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js b/packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js
index 068d2b934b6..80b465e58b9 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js
+++ b/packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js
@@ -14,7 +14,6 @@ class SimpleModal extends React.Component {
 
   render() {
     const { isModalOpen } = this.state;
-    const reactRoot = typeof document !== 'undefined' ? document.querySelector('#___gatsby') : '';
 
     return (
       <React.Fragment>
@@ -33,7 +32,6 @@ class SimpleModal extends React.Component {
               Confirm
             </Button>
           ]}
-          reactRoot={reactRoot}
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo