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