Added accessible modal via react-aria-modal

src/components/modals/Modal.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import CloseIcon from 'react-icons/lib/md/close'
-import Overlay from './Overlay'
+import AriaModal from 'react-aria-modal'
+
 
 class Modal extends React.Component {
   static propTypes = {
@@ -12,26 +13,40 @@ class Modal extends React.Component {
     children: PropTypes.node,
   }
 
+  getApplicationNode() {
+    return document.getElementById('app');
+  }
+
   render() {
-    return <Overlay isOpen={this.props.isOpen}>
-      <div className="maputnik-modal"
-        data-wd-key={this.props["data-wd-key"]}
+    if(this.props.isOpen) {
+      return <AriaModal
+        titleText={this.props.title}
+        getApplicationNode={this.getApplicationNode}
+        verticallyCenter={true}
+        onExit={() => this.props.onOpenToggle(false)}
       >
-        <header className="maputnik-modal-header">
-          <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
-          <span className="maputnik-modal-header-space"></span>
-          <a className="maputnik-modal-header-toggle"
-            onClick={() => this.props.onOpenToggle(false)}
-            data-wd-key={this.props["data-wd-key"]+".close-modal"}
-          >
-            <CloseIcon />
-          </a>
-        </header>
-        <div className="maputnik-modal-scroller">
-          <div className="maputnik-modal-content">{this.props.children}</div>
+        <div className="maputnik-modal"
+          data-wd-key={this.props["data-wd-key"]}
+        >
+          <header className="maputnik-modal-header">
+            <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+            <span className="maputnik-modal-header-space"></span>
+            <a className="maputnik-modal-header-toggle"
+              onClick={() => this.props.onOpenToggle(false)}
+              data-wd-key={this.props["data-wd-key"]+".close-modal"}
+            >
+              <CloseIcon />
+            </a>
+          </header>
+          <div className="maputnik-modal-scroller">
+            <div className="maputnik-modal-content">{this.props.children}</div>
+          </div>
         </div>
-      </div>
-    </Overlay>
+      </AriaModal>
+    }
+    else {
+      return false;
+    }
   }
 }