Modal component

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

@@ -8,7 +8,7 @@ import { forEach } from 'lodash';
  */
 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,26 @@ 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;
+				if ( this.props.forwardedRef ) {
+					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 } />;
+		} );
 	}, 'withGlobalEvents' );
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import TestRenderer from 'react-test-renderer';
 
 /**
  * External dependencies
@@ -62,20 +62,22 @@ describe( 'withGlobalEvents', () => {
 			resize: 'handleResize',
 		} )( OriginalComponent );
 
-		wrapper = mount( <EnhancedComponent { ...props }>Hello</EnhancedComponent> );
+		wrapper = TestRenderer.create( <EnhancedComponent { ...props }>Hello</EnhancedComponent> );
 	}
 
 	it( 'renders with original component', () => {
 		mountEnhancedComponent();
 
-		expect( wrapper.childAt( 0 ).childAt( 0 ).type() ).toBe( 'div' );
-		expect( wrapper.childAt( 0 ).text() ).toBe( 'Hello' );
+		expect( wrapper.root.findByType( 'div' ).children[ 0 ] ).toBe( 'Hello' );
 	} );
 
 	it( 'binds events from passed object', () => {
 		mountEnhancedComponent();
 
-		expect( Listener._instance.add ).toHaveBeenCalledWith( 'resize', wrapper.instance() );
+		// Get the HOC wrapper instance
+		const hocInstance = wrapper.root.findByType( OriginalComponent ).parent.instance;
+
+		expect( Listener._instance.add ).toHaveBeenCalledWith( 'resize', hocInstance );
 	} );
 
 	it( 'handles events', () => {

components/index.js

@@ -27,6 +27,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 } 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,163 @@
+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`](https://github.com/reactjs/react-modal).
+
+## Usage
+
+Render a screen overlay with a modal on top.
+```jsx
+	<Modal
+		title="My Modal"
+		onRequestClose={ closeFunction }
+		isOpen={ openState }
+		aria={ {
+		    describedby: "modal-description",
+		} }
+		>
+		<ModalContent>
+			<p id="modal-description">This modal is meant to be awesome!</p>
+		</ModalConent>
+	</Modal>
+```
+
+## Implement close logic
+
+For the modal to properly work it's important you implement the close logic for the modal properly. The following example shows you how to properly implement a modal.
+
+```js
+const { Component, Fragment } = wp.element;
+const { Modal } = wp.components;
+
+class MyModalWrapper extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			isOpen: true,
+		}
+
+		this.openModal = this.openModal.bind( this );
+		this.closeModal = this.closeModal.bind( this );
+	}
+
+	openModal() {
+		if ( ! this.state.isOpen ) {
+			this.setState( { isOpen: true } );
+		}
+	}
+
+	closeModal() {
+		if ( this.state.isOpen ) {
+			this.setState( { isOpen: false } );
+		}
+	}
+
+	render() {
+		return (
+			<Fragment>
+				<button onClick={ this.openModal }>Open Modal</button>
+				{ this.state.isOpen ? 
+                    <Modal
+                        title="This is my modal"
+                        onRequestClose={ this.closeModal }>
+                        <button onClick={ this.closeModal }>
+                            My custom close button
+                        </button>
+                    </Modal> 
+                    : null }
+			</Fragment>
+		);
+	}
+}
+```
+
+## 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.
+
+### title
+
+This property is used as the modal header's title. It is required for accessibility reasons.
+
+- Type: `String`
+- Required: Yes
+
+### 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
+- Default: `modal-heading`
+
+### 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
+
+### className
+
+If this property is added, it will an additional class name to the modal content `div`.
+
+- Type: `String`
+- Required: No
+
+### role
+
+If this property is added, it will override the default role of the modal.
+
+- Type: `String`
+- Required: No
+- Default: `dialog`
+
+### 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,77 @@
+/**
+ * External dependencies
+ */
+import { forEach } from 'lodash';
+
+let hiddenElements = [],
+	isHidden = false;
+
+/**
+ * Hides all elements in the body element from screen-readers except
+ * the provided element and elements that should not be hidden from
+ * screen-readers.
+ *
+ * The reason we do this is because `aria-modal="true"` currently is bugged
+ * in Safari, and support is spotty in other browsers overall. In the future
+ * we should consider removing these helper functions in favor of
+ * `aria-modal="true"`.
+ *
+ * @param {Element} unhiddenElement The element that should not be hidden.
+ */
+export function hideApp( unhiddenElement ) {
+	if ( isHidden ) {
+		return;
+	}
+	const elements = document.body.children;
+	forEach( elements, ( element ) => {
+		if (
+			element === unhiddenElement
+		) {
+			return;
+		}
+		if ( elementShouldBeHidden( element ) ) {
+			element.setAttribute( 'aria-hidden', 'true' );
+			hiddenElements.push( element );
+		}
+	} );
+	isHidden = true;
+}
+
+/**
+ * Determines if the passed element should not be hidden from screen readers.
+ *
+ * @param {HTMLElement} element The element that should be checked.
+ *
+ * @return {boolean} Whether the element should not be hidden from screen-readers.
+ */
+export function elementShouldBeHidden( element ) {
+	const liveRegionAriaRoles = [
+		'alert',
+		'status',
+		'log',
+		'marquee',
+		'timer',
+	];
+	const role = element.getAttribute( 'role' );
+	return ! (
+		element.tagName === 'SCRIPT' ||
+		element.hasAttribute( 'aria-hidden' ) ||
+		element.hasAttribute( 'aria-live' ) ||
+		liveRegionAriaRoles.includes( role )
+	);
+}
+
+/**
+ * Makes all elements in the body that have been hidden by `hideApp`
+ * visible again to screen-readers.
+ */
+export function showApp() {
+	if ( ! isHidden ) {
+		return;
+	}
+	forEach( hiddenElements, ( element ) => {
+		element.removeAttribute( 'aria-hidden' );
+	} );
+	hiddenElements = [];
+	isHidden = false;
+}