Skip to content

Commit 9089a2d

Browse files
committedMay 17, 2016
[fixed] Make the modal portal render into body again (#176)
In c13fed9 behavior was changed so that the modal portal ended up rendering into the app element. In the default case where the appElement receives aria-hidden when the modal is open, this meant that the modal itself was also contained inside the aria-hidden element. This limits the ability for screenreaders to read the modal contents. Server-side rendering should not be affected by this change because componentDidMount is only fired on the client-side thus having a reference to document.body there should be acceptable. Upgrade Path: - Make sure that you are setting an app element (rather than using the default document.body) so that modal contents are not being aria-hidden
1 parent e9aff7a commit 9089a2d

File tree

2 files changed

+4
-17
lines changed

2 files changed

+4
-17
lines changed
 

‎lib/components/Modal.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ var Modal = React.createClass({
5050
componentDidMount: function() {
5151
this.node = document.createElement('div');
5252
this.node.className = 'ReactModalPortal';
53-
AppElement.appendChild(this.node);
53+
document.body.appendChild(this.node);
5454
this.renderPortal(this.props);
5555
},
5656

@@ -60,7 +60,7 @@ var Modal = React.createClass({
6060

6161
componentWillUnmount: function() {
6262
ReactDOM.unmountComponentAtNode(this.node);
63-
AppElement.removeChild(this.node);
63+
document.body.removeChild(this.node);
6464
elementClass(document.body).remove('ReactModal__Body--open');
6565
},
6666

‎specs/Modal.spec.js

+2-15
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,6 @@ describe('Modal', function () {
2626
unmountModal();
2727
});
2828

29-
it('uses the global appElement', function() {
30-
var app = document.createElement('div');
31-
var node = document.createElement('div');
32-
Modal.setAppElement(app);
33-
ReactDOM.render(React.createElement(Modal, {isOpen: true}), node);
34-
var modalParent = app.querySelector('.ReactModalPortal').parentNode;
35-
assert.notEqual(modalParent, document.body);
36-
assert.equal(modalParent, app);
37-
equal(app.getAttribute('aria-hidden'), 'true');
38-
ariaAppHider.resetForTesting();
39-
ReactDOM.unmountComponentAtNode(node);
40-
});
41-
4229
it('accepts appElement as a prop', function() {
4330
var el = document.createElement('div');
4431
var node = document.createElement('div');
@@ -54,10 +41,10 @@ describe('Modal', function () {
5441
var node = document.createElement('div');
5542
var App = React.createClass({
5643
render: function() {
57-
return React.DOM.div({}, React.createElement(Modal, {isOpen: true, ariaHideApp: false}, 'hello'));
44+
return React.DOM.div({}, React.createElement(Modal, {isOpen: true}, 'hello'));
5845
}
5946
});
60-
Modal.setAppElement(document.body);
47+
Modal.setAppElement(node);
6148
ReactDOM.render(React.createElement(App), node);
6249
var modalParent = document.body.querySelector('.ReactModalPortal').parentNode;
6350
equal(modalParent, document.body);

0 commit comments

Comments
 (0)
Please sign in to comment.