Modal component

components/higher-order/with-focus-contain/index.js

@@ -0,0 +1,54 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/**
+ * WordPress dependencies
+ */
+import { Component, createRef } from '@wordpress/element';
+import { focus, keycodes } from '@wordpress/utils';
+
+const {
+	TAB,
+} = keycodes;
+
+const withFocusContain = ( WrappedComponent ) => {
+	return class extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.focusContainRef = createRef();
+			this.handleTabBehaviour = this.handleTabBehaviour.bind( this );
+		}
+
+		handleTabBehaviour( event ) {
+			if ( ! event.keyCode === TAB ) {
+				return;
+			}
+
+			const tabbables = focus.tabbable.find( this.focusContainRef.current );
+			if ( ! tabbables.length ) {
+				return;
+			}
+			const firstTabbable = tabbables[ 0 ];
+			const lastTabbable = tabbables[ tabbables.length - 1 ];
+
+			if ( event.shiftKey && event.target === firstTabbable ) {
+				event.preventDefault();
+				lastTabbable.focus();
+			} else if ( ! event.shiftKey && event.target === lastTabbable ) {
+				event.preventDefault();
+				firstTabbable.focus();
+			}
+		}
+
+		render() {
+			return (
+				<div
+					onKeyDown={ this.handleTabBehaviour }
+					ref={ this.focusContainRef } >
+					<WrappedComponent { ...this.props } />
+				</div>
+			);
+		}
+	};
+};
+
+export default withFocusContain;

components/higher-order/with-global-events/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { forEach } from 'lodash';
+import { forEach, noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import {
 	Component,
-	createRef,
+	forwardRef,
 	createHigherOrderComponent,
 } from '@wordpress/element';
 
@@ -26,13 +26,12 @@ const listener = new Listener();
 
 function withGlobalEvents( eventTypesToHandlers ) {
 	return createHigherOrderComponent( ( WrappedComponent ) => {
-		return class extends Component {
+		class Wrapper extends Component {
 			constructor() {
 				super( ...arguments );
 
 				this.handleEvent = this.handleEvent.bind( this );
-
-				this.ref = createRef();
+				this.handleRef = this.handleRef.bind( this );
 			}
 
 			componentDidMount() {
@@ -49,15 +48,24 @@ function withGlobalEvents( eventTypesToHandlers ) {
 
 			handleEvent( event ) {
 				const handler = eventTypesToHandlers[ event.type ];
-				if ( typeof this.ref.current[ handler ] === 'function' ) {
-					this.ref.current[ handler ]( event );
+				if ( typeof this.wrappedRef[ handler ] === 'function' ) {
+					this.wrappedRef[ handler ]( event );
 				}
 			}
 
+			handleRef( el ) {
+				this.wrappedRef = el;
+				this.props.forwardedRef( el );
+			}
+
 			render() {
-				return <WrappedComponent ref={ this.ref } { ...this.props } />;
+				return <WrappedComponent { ...this.props } ref={ this.handleRef } />;
 			}
-		};
+		}
+
+		return forwardRef( ( props, ref ) => {
+			return <Wrapper { ...props } forwardedRef={ ref || noop } />;
+		} );
 	}, 'withGlobalEvents' );
 }
 

components/index.js

@@ -25,6 +25,7 @@ export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';
 export { default as MenuItemsChoice } from './menu-items-choice';
+export { default as Modal, ModalContextProvider } from './modal';
 export { default as ScrollLock } from './scroll-lock';
 export { NavigableMenu, TabbableContainer } from './navigable-container';
 export { default as Notice } from './notice';

components/modal/README.md

@@ -0,0 +1,115 @@
+Modal
+=======
+
+The modal is used to create an accessible modal over an application.
+
+**Note:** The API for this modal has been mimicked to resemble `react-modal`.
+
+## Usage
+
+Render a screen overlay with a modal on top.
+```jsx
+	<ModalContextProvider value={ { elementId: 'wpwrap' } }>
+		<Modal
+			aria={ {
+				labelledby: 'modal-title',
+				describedby: 'modal-description',
+			} }
+			parentSelector={ () => {
+				return document.getElementById( 'wpwrap' );
+			} )
+			>
+			<ModalContent>
+				<h2 id="modal-title">My awesome modal!</h2>
+				<p id="modal-description">This modal is meant to be awesome!</p>
+			</ModalConent>
+		</Modal>
+    </ModalContextProvider>
+```
+
+## Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input elements.
+
+### onRequestClose
+
+This function is called to indicate that the modal should be closed.
+
+- Type: `function`
+- Required: Yes
+
+### contentLabel
+
+If this property is added, it will be added to the modal content `div` as `aria-label`.
+You are encouraged to use this if `aria.labelledby` is not provided.
+
+- Type: `String`
+- Required: No
+
+### aria.labelledby
+
+If this property is added, it will be added to the modal content `div` as `aria-labelledby`.
+You are encouraged to use this when the modal is visually labelled.
+
+- Type: `String`
+- Required: No
+
+### aria.describedby
+
+If this property is added, it will be added to the modal content `div` as `aria-describedby`.
+
+- Type: `String`
+- Required: No
+
+### focusOnMount
+
+If this property is true, it will focus the first tabbable element rendered in the modal.
+
+- Type: `bool`
+- Required: No
+- Default: true
+
+### shouldCloseOnEsc
+
+If this property is added, it will determine whether the modal requests to close when the escape key is pressed. 
+
+- Type: `bool`
+- Required: No
+- Default: true
+
+### shouldCloseOnClickOutside
+
+If this property is added, it will determine whether the modal requests to close when a mouse click occurs outside of the modal content.
+
+- Type: `bool`
+- Required: No
+- Default: true
+
+### style.content
+
+If this property is added, it will add inline styles to the modal content `div`.
+
+- Type: `Object`
+- Required: No
+
+### style.overlay
+
+If this property is added, it will add inline styles to the modal overlay `div`.
+
+- Type: `Object`
+- Required: No
+
+### className
+
+If this property is added, it will an additional class name to the modal content `div`.
+
+- Type: `String`
+- Required: No
+
+### overlayClassName
+
+If this property is added, it will an additional class name to the modal overlay `div`.
+
+- Type: `String`
+- Required: No

components/modal/aria-helper.js

@@ -0,0 +1,19 @@
+let appElement = null;
+
+export function setAppElement( node ) {
+	if ( ! appElement ) {
+		appElement = node;
+	}
+}
+
+export function hideApp() {
+	if ( appElement ) {
+		appElement.setAttribute( 'aria-hidden', 'true' );
+	}
+}
+
+export function showApp() {
+	if ( appElement ) {
+		appElement.removeAttribute( 'aria-hidden' );
+	}
+}

components/modal/context.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, createHigherOrderComponent } from '@wordpress/element';
+
+const { Consumer, Provider } = createContext( {
+	appElementId: null,
+} );
+
+export { Provider as ModalContextProvider };
+
+/**
+ * A Higher-order Component used to inject Modal context into the wrapped
+ * component.
+ *
+ * @param {Component} OriginalComponent Component to wrap.
+ *
+ * @return {Component} Component with Modal context injected.
+ */
+export const withModalContext = createHigherOrderComponent(
+	( OriginalComponent ) => ( props ) => (
+		<Consumer>
+			{ ( modalContext ) => (
+				<OriginalComponent
+					{ ...props }
+					modalContext={ modalContext }
+				/>
+			) }
+		</Consumer>
+	),
+	'withModalContext'
+);