From 221cd4ffd2dd34f77eb6cdea2db76f00e5653255 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 11 May 2018 10:55:32 +0100 Subject: [PATCH] Added accessible modal via react-aria-modal --- package-lock.json | 51 +++++++++++++++++++++++++------ package.json | 1 + src/components/Button.jsx | 4 +-- src/components/modals/Modal.jsx | 51 ++++++++++++++++++++----------- src/components/modals/Overlay.jsx | 24 --------------- src/styles/_modal.scss | 26 +--------------- 6 files changed, 78 insertions(+), 79 deletions(-) delete mode 100644 src/components/modals/Overlay.jsx diff --git a/package-lock.json b/package-lock.json index 93ad129..44661bb 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5de85a2..fc8f058 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button.jsx b/src/components/Button.jsx index b1189c1..0815368 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -12,13 +12,13 @@ class Button extends React.Component { } render() { - return {this.props.children} - + } } diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx index 1b1e2da..34acf3e 100644 --- a/src/components/modals/Modal.jsx +++ b/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 -
this.props.onOpenToggle(false)} > -
-

{this.props.title}

- - this.props.onOpenToggle(false)} - data-wd-key={this.props["data-wd-key"]+".close-modal"} - > - - -
-
-
{this.props.children}
+
+
+

{this.props.title}

+ + this.props.onOpenToggle(false)} + data-wd-key={this.props["data-wd-key"]+".close-modal"} + > + + +
+
+
{this.props.children}
+
-
- + + } + else { + return false; + } } } diff --git a/src/components/modals/Overlay.jsx b/src/components/modals/Overlay.jsx deleted file mode 100644 index 7537478..0000000 --- a/src/components/modals/Overlay.jsx +++ /dev/null @@ -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
-
- {this.props.children} -
- } -} - -export default Overlay diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 897a836..883b151 100644 --- a/src/styles/_modal.scss +++ b/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;