Improve accessibility, fixes #359

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.
 

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",

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();
   });

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}

src/helpers/ariaAppHider.js

@@ -1,3 +1,5 @@
+import warning from "warning";
+
 let globalElement = null;
 
 export function assertNodeList(nodeList, selector) {
@@ -19,42 +21,41 @@ 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() {
   globalElement = null;
 }
 
 export function resetForTesting() {
-  globalElement = document.body;
+  globalElement = null;
 }