fix(modal): Use React portals for accessibility fixes

cypress/integration/Modal.spec.ts

@@ -6,7 +6,6 @@ function getModalTargetButton() {
 
 describe('Modal', () => {
   before(() => {
-    cy.viewport(500, 300);
     h.stories.visit();
   });
 
@@ -39,6 +38,30 @@ describe('Modal', () => {
           h.modal.get().should('be.visible');
         });
 
+        it('should place the portal as a child of the body element', () => {
+          cy.get('body').then($body => {
+            h.modal
+              .get()
+              .parent() // wrapper
+              .parent()
+              .should($el => {
+                expect($el[0]).to.equal($body[0]);
+              });
+          });
+        });
+
+        it('should hide non-modal content from assistive technology', () => {
+          h.modal
+            .get()
+            .parent()
+            .siblings()
+            .should($siblings => {
+              $siblings.each((_, $sibling) => {
+                expect($sibling).to.have.attr('aria-hidden', 'true');
+              });
+            });
+        });
+
         it('should not have any axe errors', () => {
           cy.checkA11y();
         });
@@ -161,6 +184,30 @@ describe('Modal', () => {
         h.modal.get().should('be.visible');
       });
 
+      it('should place the portal as a child of the body element', () => {
+        cy.get('body').then($body => {
+          h.modal
+            .get()
+            .parent() // wrapper
+            .parent()
+            .should($el => {
+              expect($el[0]).to.equal($body[0]);
+            });
+        });
+      });
+
+      it('should hide non-modal content from assistive technology', () => {
+        h.modal
+          .get()
+          .parent()
+          .siblings()
+          .should($siblings => {
+            $siblings.each((_, $sibling) => {
+              expect($sibling).to.have.attr('aria-hidden', 'true');
+            });
+          });
+      });
+
       it('should not have any axe errors', () => {
         cy.checkA11y();
       });

modules/modal/react/lib/Modal.tsx

@@ -15,8 +15,9 @@ export interface ModalProps extends ModalContentProps {
   open: boolean;
 }
 
-const Modal = ({open, ...modalContentProps}: ModalProps): JSX.Element | null =>
-  open ? <ModalContent {...modalContentProps} /> : null;
+const Modal = ({open, ...modalContentProps}: ModalProps): JSX.Element | null => {
+  return open ? <ModalContent {...modalContentProps} /> : null;
+};
 
 Modal.Padding = PopupPadding;
 Modal.Width = ModalWidth;

modules/modal/react/lib/ModalContent.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import styled from '@emotion/styled';
 import {keyframes} from '@emotion/core';
 import tabTrappingKey from 'focus-trap-js';
@@ -172,7 +173,28 @@ const ModalContent = ({
     }
   };
 
-  return (
+  React.useEffect(() => {
+    const siblings = [...((document.body.children as any) as HTMLElement[])].filter(
+      el => el !== modalRef.current!.parentElement
+    );
+    const prevAriaHidden = siblings.map(el => el.getAttribute('aria-hidden'));
+    siblings.forEach(el => {
+      el.setAttribute('aria-hidden', 'true');
+    });
+
+    return () => {
+      siblings.forEach((el, index) => {
+        const prev = prevAriaHidden[index];
+        if (prev) {
+          el.setAttribute('aria-hidden', prev);
+        } else {
+          el.removeAttribute('aria-hidden');
+        }
+      });
+    };
+  }, []);
+
+  const content = (
     <Container onClick={handleOutsideClick} {...elemProps}>
       <Popup
         popupRef={modalRef}
@@ -186,6 +208,8 @@ const ModalContent = ({
       </Popup>
     </Container>
   );
+
+  return ReactDOM.createPortal(content, document.body);
 };
 
 export default ModalContent;