Skip to content

Commit

Permalink
fix(modal): rename reactRoot to srHide and add to ts file (patternfly…
Browse files Browse the repository at this point in the history
…#1098)

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

* remove need for reactRoot/srHide prop

* update test
  • Loading branch information
jschuler authored and tlabaj committed Dec 19, 2018
1 parent c229983 commit 1d0a941
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 12 deletions.
19 changes: 13 additions & 6 deletions packages/patternfly-4/react-core/src/components/Modal/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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);
Expand All @@ -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);
}
}

Expand All @@ -78,7 +85,7 @@ class Modal extends React.Component {
}

render() {
const { reactRoot, ...props } = this.props;
const { ...props } = this.props;

if (!canUseDOM) {
return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down

0 comments on commit 1d0a941

Please sign in to comment.