feat: make modal accessible

components/system/components/GlobalModal.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import FocusLock from "react-focus-lock";
 import * as Constants from "~/common/constants";
 import * as SVG from "~/components/system/svg";
 import * as Strings from "~/common/strings";
@@ -46,11 +47,13 @@ export class GlobalModal extends React.Component {
   componentDidMount = () => {
     window.addEventListener("create-modal", this._handleCreate);
     window.addEventListener("delete-modal", this._handleDelete);
+    window.addEventListener("keydown", this._handleDocumentKeydown);
   };
 
   componentWillUnmount = () => {
     window.removeEventListener("create-modal", this._handleCreate);
     window.removeEventListener("delete-modal", this._handleDelete);
+    window.removeEventListener("keydown", this._handleDocumentKeydown);
   };
 
   _handleCreate = (e) => {
@@ -61,21 +64,47 @@ export class GlobalModal extends React.Component {
     this.setState({ modal: null });
   };
 
+  _handleDocumentKeydown = (e) => {
+    if (this.state.modal && e.keyCode === 27) {
+      this.setState({ modal: null });
+    }
+
+    e.stopPropagation();
+  };
+
+  _handleEnterPress = (e) => {
+    if (e.key === "Enter") {
+      this.setState({ modal: null });
+    }
+  };
+
   render() {
     if (!this.state.modal) return null;
     return (
-      <div css={STYLES_BACKGROUND} style={this.props.backgroundStyle}>
+      <FocusLock>
+        <div
+          css={STYLES_BACKGROUND}
+          style={this.props.backgroundStyle}
+          role="dialog"
+          aria-modal="true"
+          aria-label={this.props.label ? this.props.label : "modal"}
+        >
           <Boundary
             enabled
             onOutsideRectEvent={this._handleDelete}
             isDataMenuCaptured={true}
           >
             <div css={STYLES_MODAL} style={this.props.style}>
+              <SVG.Dismiss
+                css={STYLES_CLOSE_ICON}
+                onClick={this._handleDelete}
+                onKeyPress={this._handleEnterPress}
+              />
               {this.state.modal}
-            <SVG.Dismiss css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
             </div>
           </Boundary>
         </div>
+      </FocusLock>
     );
   }
 }

components/system/svg.js

@@ -7,6 +7,7 @@ export const Dismiss = (props) => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
+    tabIndex="0"
     height={props.height}
     style={props.style}
     {...props}

package.json

@@ -62,6 +62,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-draggable": "^4.4.3",
+    "react-focus-lock": "^2.4.1",
     "react-tippy": "^1.3.4",
     "regenerator-runtime": "^0.13.5",
     "three": "^0.108.0",

pages/system/modals.js

@@ -190,6 +190,14 @@ import { GlobalModal, dispatchCustomEvent } from 'slate-react-system';`}
                   d:
                     "Style object used to style the modal background (color, etc.)",
                 },
+                {
+                  id: 3,
+                  a: "label",
+                  b: "String",
+                  c: "modal",
+                  d:
+                    "A label for the modal provide context for users with assistive technology such as screen readers.",
+                },
               ],
             }}
           />