feat(PF4-Modal): Adds keyboard and screen reader focus trapping (patt…

…ernfly#1011) * feat(PF4-Modal): Adds keyboard and screen reader focus trapping BREAKING CHANGE: The reactRoot prop is required Fixes patternfly#561 * Clicking outside of modal closes it
redallen · Dec 12, 2018 · 7fa93b3 · 7fa93b3
1 parent a3f72d8
commit 7fa93b3
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 37 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import ModalContent from './ModalContent';
+import safeHTMLElement from '../../internal/safeHTMLElement';
 import { canUseDOM } from 'exenv';
 import { KEY_CODES } from '../../internal/constants';
 import { css } from '@patternfly/react-styles';
@@ -23,7 +24,9 @@ const propTypes = {
   /** A callback for when the close button is clicked */
   onClose: PropTypes.func,
   /** Creates a large version of the Modal */
-  isLarge: PropTypes.bool
+  isLarge: PropTypes.bool,
+  /** React application root element */
+  reactRoot: PropTypes.instanceOf(safeHTMLElement).isRequired
 };
 
 const defaultProps = {
@@ -62,8 +65,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);
     } else {
       document.body.classList.remove(css(styles.backdropOpen));
+      this.props.reactRoot.removeAttribute('aria-hidden');
     }
   }
 
@@ -73,6 +78,8 @@ class Modal extends React.Component {
   }
 
   render() {
+    const { reactRoot, ...props } = this.props;
+
     if (!canUseDOM) {
       return null;
     }
@@ -81,7 +88,7 @@ class Modal extends React.Component {
       this.container = document.createElement('div');
     }
 
-    return ReactDOM.createPortal(<ModalContent {...this.props} id={this.id} />, this.container);
+    return ReactDOM.createPortal(<ModalContent {...props} id={this.id} />, this.container);
   }
 }
 

diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js
@@ -14,7 +14,8 @@ const props = {
   title: 'Modal',
   onClose: jest.fn(),
   isOpen: false,
-  children: 'modal content'
+  children: 'modal content',
+  reactRoot: document.createElement('div')
 };
 
 test('Modal creates a container element once for div', () => {

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import FocusTrap from 'focus-trap-react';
 import ModalBoxBody from './ModalBoxBody';
 import ModalBoxHeader from './ModalBoxHeader';
 import ModalBoxHCloseButton from './ModalBoxCloseButton';
@@ -47,14 +48,16 @@ const ModalContent = ({ children, className, isOpen, title, hideTitle, actions,
   return (
     <Backdrop>
       <Bullseye>
-        <ModalBox className={className} isLarge={isLarge} title={title} id={id}>
-          <ModalBoxHCloseButton onClose={onClose} />
-          {modalBoxHeader}
-          <ModalBoxBody {...props} id={id}>
-            {children}
-          </ModalBoxBody>
-          {modalBoxFooter}
-        </ModalBox>
+        <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+          <ModalBox className={className} isLarge={isLarge} title={title} id={id}>
+            <ModalBoxHCloseButton onClose={onClose} />
+            {modalBoxHeader}
+            <ModalBoxBody {...props} id={id}>
+              {children}
+            </ModalBoxBody>
+            {modalBoxFooter}
+          </ModalBox>
+        </FocusTrap>
       </Bullseye>
     </Backdrop>
   );

diff --git a/...ages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap b/...ages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap
@@ -8,36 +8,48 @@ exports[`Modal Content Test isOpen 1`] = `
     className=""
     component="div"
   >
-    <ModalBox
-      className=""
-      id="id"
-      isLarge={false}
-      title="Test Modal Content title"
+    <FocusTrap
+      _createFocusTrap={[Function]}
+      active={true}
+      focusTrapOptions={
+        Object {
+          "clickOutsideDeactivates": true,
+        }
+      }
+      paused={false}
+      tag="div"
     >
-      <ModalBoxCloseButton
-        className=""
-        onClose={[Function]}
-      />
-      <ModalBoxHeader
-        className=""
-      >
-         
-        Test Modal Content title
-         
-      </ModalBoxHeader>
-      <ModalBoxBody
+      <ModalBox
         className=""
         id="id"
+        isLarge={false}
+        title="Test Modal Content title"
       >
-        This is a ModalBox header
-      </ModalBoxBody>
-      <ModalBoxFooter
-        className=""
-      >
-         
-         
-      </ModalBoxFooter>
-    </ModalBox>
+        <ModalBoxCloseButton
+          className=""
+          onClose={[Function]}
+        />
+        <ModalBoxHeader
+          className=""
+        >
+           
+          Test Modal Content title
+           
+        </ModalBoxHeader>
+        <ModalBoxBody
+          className=""
+          id="id"
+        >
+          This is a ModalBox header
+        </ModalBoxBody>
+        <ModalBoxFooter
+          className=""
+        >
+           
+           
+        </ModalBoxFooter>
+      </ModalBox>
+    </FocusTrap>
   </Bullseye>
 </Backdrop>
 `;

diff --git a/packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js b/packages/patternfly-4/react-core/src/components/Modal/examples/LargeModal.js
@@ -33,6 +33,7 @@ class LargeModal extends React.Component {
               Confirm
             </Button>
           ]}
+          reactRoot={document.querySelector('#___gatsby')}
         >
           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

diff --git a/packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js b/packages/patternfly-4/react-core/src/components/Modal/examples/SimpleModal.js
@@ -32,6 +32,7 @@ class SimpleModal extends React.Component {
               Confirm
             </Button>
           ]}
+          reactRoot={document.querySelector('#___gatsby')}
         >
           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

diff --git a/packages/patternfly-4/react-core/src/internal/safeHTMLElement.js b/packages/patternfly-4/react-core/src/internal/safeHTMLElement.js
@@ -0,0 +1,4 @@
+// https://github.com/reactjs/react-modal/blob/master/src/helpers/safeHTMLElement.js
+import { canUseDOM } from 'exenv';
+
+export default (canUseDOM ? window.HTMLElement : {});