From 38dc8f9168f1f8ca75c1f9eee99e421cf0b38873 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <sheerun@sher.pl>
Date: Thu, 30 Nov 2017 13:52:57 +0100
Subject: [PATCH] [fixes] don't set aria-hidden if appElement is not defined.

- adds aria-modal="true" to modal portal
- doesn't make body a default appElement
- warns if appElement is not set in any way

fixes #359
---
 README.md                     |  3 ---
 package.json                  |  3 ++-
 specs/Modal.spec.js           |  9 --------
 src/components/ModalPortal.js | 17 ++++++---------
 src/helpers/ariaAppHider.js   | 41 ++++++++++++++++++-----------------
 5 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index f73b3343..b7a2eb41 100644
--- a/README.md
+++ b/README.md
@@ -57,9 +57,6 @@ to prevent assistive technologies such as screenreaders
 from reading content outside of the content of
 your modal.
 
-It's optional and if not specified it will try to use
-`document.body` as your app element.
-
 If you are doing server-side rendering, you should use
 this property.
 
diff --git a/package.json b/package.json
index 6614cd8d..6da6c591 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,8 @@
   },
   "dependencies": {
     "exenv": "^1.2.0",
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "warning": "^3.0.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0 || ^16",
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index 22ef069f..47c43410 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -339,15 +339,6 @@ export default () => {
     unmountModal();
   });
 
-  it("uses document.body for aria-hidden if no appElement", () => {
-    ariaAppHider.documentNotReadyOrSSRTesting();
-    const node = document.createElement("div");
-    ReactDOM.render(<Modal isOpen />, node);
-    document.body.getAttribute("aria-hidden").should.be.eql("true");
-    ReactDOM.unmountComponentAtNode(node);
-    should(document.body.getAttribute("aria-hidden")).not.be.ok();
-  });
-
   it("raises an exception if the appElement selector does not match", () => {
     should(() => ariaAppHider.setElement(".test")).throw();
   });
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index 3c8c96e2..8571fd23 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -99,9 +99,7 @@ export default class ModalPortal extends Component {
   }
 
   componentWillUnmount() {
-    // Remove body class
-    bodyClassList.remove(this.props.bodyOpenClassName);
-    this.beforeClose();
+    this.afterClose();
     clearTimeout(this.closeTimer);
   }
 
@@ -127,17 +125,16 @@ export default class ModalPortal extends Component {
     }
   }
 
-  beforeClose() {
+  afterClose = () => {
     const { appElement, ariaHideApp } = this.props;
+
+    // Remove body class
+    bodyClassList.remove(this.props.bodyOpenClassName);
+
     // Reset aria-hidden attribute if all modals have been removed
     if (ariaHideApp && refCount.totalCount() < 1) {
       ariaAppHider.show(appElement);
     }
-  }
-
-  afterClose = () => {
-    // Remove body class
-    bodyClassList.remove(this.props.bodyOpenClassName);
 
     if (this.props.shouldFocusAfterRender) {
       if (this.props.shouldReturnFocusAfterClose) {
@@ -171,7 +168,6 @@ export default class ModalPortal extends Component {
   };
 
   close = () => {
-    this.beforeClose();
     if (this.props.closeTimeoutMS > 0) {
       this.closeWithTimeout();
     } else {
@@ -309,6 +305,7 @@ export default class ModalPortal extends Component {
         onClick={this.handleOverlayOnClick}
         onMouseDown={this.handleOverlayOnMouseDown}
         onMouseUp={this.handleOverlayOnMouseUp}
+        aria-modal="true"
       >
         <div
           ref={this.setContentRef}
diff --git a/src/helpers/ariaAppHider.js b/src/helpers/ariaAppHider.js
index 62371228..b1e8f637 100644
--- a/src/helpers/ariaAppHider.js
+++ b/src/helpers/ariaAppHider.js
@@ -1,3 +1,5 @@
+import warning from "warning";
+
 let globalElement = null;
 
 export function assertNodeList(nodeList, selector) {
@@ -19,36 +21,35 @@ export function setElement(element) {
   return globalElement;
 }
 
-export function tryForceFallback() {
-  if (document && document.body) {
-    // force fallback to document.body
-    setElement(document.body);
-    return true;
-  }
-  return false;
-}
-
 export function validateElement(appElement) {
-  if (!appElement && !globalElement && !tryForceFallback()) {
-    throw new Error(
+  if (!appElement && !globalElement) {
+    warning(
+      false,
       [
-        "react-modal: Cannot fallback to `document.body`, because it is not",
-        "ready or available. If you are doing server-side rendering, use this",
-        "function to defined an element. `Modal.setAppElement(el)` to make",
-        "this accessible"
+        "react-modal: App element is not defined.",
+        "Please use `Modal.setAppElement(el)` or set `appElement={el}`.",
+        "This is needed so screen reades don't see main content",
+        "when modal is opened. It is not recommended, but you can opt-out",
+        "by setting `ariaHideApp={false}`."
       ].join(" ")
     );
+
+    return false;
   }
+
+  return true;
 }
 
 export function hide(appElement) {
-  validateElement(appElement);
-  (appElement || globalElement).setAttribute("aria-hidden", "true");
+  if (validateElement(appElement)) {
+    (appElement || globalElement).setAttribute("aria-hidden", "true");
+  }
 }
 
 export function show(appElement) {
-  validateElement(appElement);
-  (appElement || globalElement).removeAttribute("aria-hidden");
+  if (validateElement(appElement)) {
+    (appElement || globalElement).removeAttribute("aria-hidden");
+  }
 }
 
 export function documentNotReadyOrSSRTesting() {
@@ -56,5 +57,5 @@ export function documentNotReadyOrSSRTesting() {
 }
 
 export function resetForTesting() {
-  globalElement = document.body;
+  globalElement = null;
 }