Merge pull request #300 from orangemug/accessibility/react-aria-modal

Added accessible modal via react-aria-modal

package-lock.json

@@ -5598,6 +5598,22 @@
         "readable-stream": "2.3.5"
       }
     },
+    "focus-trap": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-2.4.4.tgz",
+      "integrity": "sha512-tut5fKeBRY4ZmNoygXNRL0xg2KppL1S+zsT+1L7cbB/D7hymKsHR8kJk+8mbYSySfYFzxoENQ+knkWLj4l1h/Q==",
+      "requires": {
+        "tabbable": "1.1.3"
+      }
+    },
+    "focus-trap-react": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-3.1.2.tgz",
+      "integrity": "sha512-MoQmONoy9gRPyrC5DGezkcOMGgx7MtIOAQDHe098UtL2sA2vmucJwEmQisb+8LRXNYFHxuw5zJ1oLFeKu4Mteg==",
+      "requires": {
+        "focus-trap": "2.4.4"
+      }
+    },
     "follow-redirects": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.0.0.tgz",
@@ -8193,13 +8209,6 @@
         "graceful-fs": "4.1.11"
       }
     },
-    "jsonlint": {
-      "version": "github:josdejong/jsonlint#85a19d77126771f3177582e3d09c6ffae185d391",
-      "requires": {
-        "JSV": "4.0.2",
-        "nomnom": "1.8.1"
-      }
-    },
     "jsonpointer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
@@ -8675,9 +8684,6 @@
       "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.1.0.tgz",
       "integrity": "sha512-hJ1cKkvdJ21qbBLxGk/IXQvvMIeHRSMatWIjc5UbpM4KTTOfl2V18UvqqxFd82VpA1fZ+IP7WSa2RvSwYRE02g=="
     },
-    "maputnik-design": {
-      "version": "github:maputnik/design#afd4550db2a1562159092a858be181b5baa221f7"
-    },
     "markdown-escapes": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.1.tgz",
@@ -9199,6 +9205,11 @@
         "lower-case": "1.1.4"
       }
     },
+    "no-scroll": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
+      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ=="
+    },
     "node-fetch": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@@ -11530,6 +11541,16 @@
         "object-assign": "4.1.1"
       }
     },
+    "react-aria-modal": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/react-aria-modal/-/react-aria-modal-2.12.1.tgz",
+      "integrity": "sha512-38/O/4F2zpDycZgz8CSqIeDLORspJK8sJtNiq/9VZ1asnX4imVJMUNIpZEfzSch69e2XHJoQMFUOlccHgX0J/Q==",
+      "requires": {
+        "focus-trap-react": "3.1.2",
+        "no-scroll": "2.1.1",
+        "react-displace": "2.3.0"
+      }
+    },
     "react-autocomplete": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/react-autocomplete/-/react-autocomplete-1.8.1.tgz",
@@ -11579,6 +11600,11 @@
       "integrity": "sha1-jqQmPNZFWgULN0RbPwj9g52G6Qk=",
       "dev": true
     },
+    "react-displace": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-displace/-/react-displace-2.3.0.tgz",
+      "integrity": "sha512-T8g/lyn3IX8kxLO4k4vJ/oIO9G72pRTc9GYslqKsfPcN4gY5+FYR5OHxeTH1skPjVylJrveGE3OC2qCt3BuHeA=="
+    },
     "react-dom": {
       "version": "16.3.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz",
@@ -14253,6 +14279,11 @@
         "upper-case": "1.1.3"
       }
     },
+    "tabbable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.3.tgz",
+      "integrity": "sha512-nOWwx35/JuDI4ONuF0ZTo6lYvI0fY0tZCH1ErzY2EXfu4az50ZyiUX8X073FLiZtmWUVlkRnuXsehjJgCw9tYg=="
+    },
     "table": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",

package.json

@@ -42,6 +42,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-addons-pure-render-mixin": "^15.6.2",
+    "react-aria-modal": "^2.12.1",
     "react-autocomplete": "^1.7.2",
     "react-codemirror2": "^4.2.1",
     "react-collapse": "^4.0.3",

src/components/Button.jsx

@@ -12,13 +12,13 @@ class Button extends React.Component {
   }
 
   render() {
-    return <a
+    return <button
       onClick={this.props.onClick}
       className={classnames("maputnik-button", this.props.className)}
       data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}>
       {this.props.children}
-    </a>
+    </button>
   }
 }
 

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,41 @@ class Modal extends React.Component {
     children: PropTypes.node,
   }
 
+  getApplicationNode() {
+    return document.getElementById('app');
+  }
+
   render() {
-    return <Overlay isOpen={this.props.isOpen}>
-      <div className="maputnik-modal"
+    if(this.props.isOpen) {
+      return <AriaModal
+        titleText={this.props.title}
+        getApplicationNode={this.getApplicationNode}
         data-wd-key={this.props["data-wd-key"]}
+        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;
+    }
   }
 }
 

src/components/modals/Overlay.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-
-class Overlay extends React.Component {
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired
-  }
-
-  render() {
-		let overlayStyle = {}
-		if(!this.props.isOpen) {
-			overlayStyle['display'] = 'none';
-		}
-
-    return <div className={"maputnik-overlay"} style={overlayStyle}>
-			<div className={"maputnik-overlay-viewport"} />
-      {this.props.children}
-    </div>
-  }
-}
-
-export default Overlay

src/styles/_modal.scss

@@ -7,6 +7,7 @@
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 3;
   position: relative;
+  font-family: $font-family;
 }
 
 .maputnik-modal-section {
@@ -60,31 +61,6 @@
   @extend .maputnik-space;
 }
 
-//OVERLAY
-.maputnik-overlay-viewport {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  opacity: 0.875;
-  background-color: rgb(28, 31, 36);
-}
-
-.maputnik-overlay {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  align-items: center;
-  justify-content: center;
-  z-index: 9;
-
-  @include flex-row;
-}
-
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button;