From bf81cb594ca532cab6128578712733595c357d32 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 4 May 2020 15:51:52 +1000
Subject: [PATCH 1/3] Switch HOC order in modal frame.

---
 packages/components/src/modal/frame.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js
index 955085b43428a3..9e1f384b8c9736 100644
--- a/packages/components/src/modal/frame.js
+++ b/packages/components/src/modal/frame.js
@@ -144,6 +144,6 @@ class ModalFrame extends Component {
 
 export default compose( [
 	withFocusReturn,
-	withConstrainedTabbing,
 	withFocusOutside,
+	withConstrainedTabbing,
 ] )( ModalFrame );

From 1e869f576551e3f1204655b88526f1bd3f9e44e6 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 4 May 2020 15:52:29 +1000
Subject: [PATCH 2/3] Remove redundant tab stop.

---
 packages/components/src/modal/frame.js | 14 +-------------
 packages/components/src/modal/index.js |  6 +-----
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js
index 9e1f384b8c9736..db92c673576fcb 100644
--- a/packages/components/src/modal/frame.js
+++ b/packages/components/src/modal/frame.js
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 
 import { Component, createRef } from '@wordpress/element';
 import { ESCAPE } from '@wordpress/keycodes';
-import { focus } from '@wordpress/dom';
 import { compose } from '@wordpress/compose';
 
 /**
@@ -27,7 +26,6 @@ class ModalFrame extends Component {
 		this.containerRef = createRef();
 		this.handleKeyDown = this.handleKeyDown.bind( this );
 		this.handleFocusOutside = this.handleFocusOutside.bind( this );
-		this.focusFirstTabbable = this.focusFirstTabbable.bind( this );
 	}
 
 	/**
@@ -36,17 +34,7 @@ class ModalFrame extends Component {
 	componentDidMount() {
 		// Focus on mount
 		if ( this.props.focusOnMount ) {
-			this.focusFirstTabbable();
-		}
-	}
-
-	/**
-	 * Focuses the first tabbable element.
-	 */
-	focusFirstTabbable() {
-		const tabbables = focus.tabbable.find( this.containerRef.current );
-		if ( tabbables.length ) {
-			tabbables[ 0 ].focus();
+			this.containerRef.current.focus();
 		}
 	}
 
diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
index ce0a74b9833bdb..450800cbfeebd4 100644
--- a/packages/components/src/modal/index.js
+++ b/packages/components/src/modal/index.js
@@ -136,11 +136,7 @@ class Modal extends Component {
 				} }
 				{ ...otherProps }
 			>
-				<div
-					className={ 'components-modal__content' }
-					tabIndex="0"
-					role="document"
-				>
+				<div className={ 'components-modal__content' } role="document">
 					<ModalHeader
 						closeLabel={ closeButtonLabel }
 						headingId={ headingId }

From 68300a54d32a7c7c5ff4d134d8a1ac74a092a4cd Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 May 2020 10:40:26 +1000
Subject: [PATCH 3/3] Revert HOC reordering

---
 packages/components/src/modal/frame.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js
index db92c673576fcb..25938225598a3b 100644
--- a/packages/components/src/modal/frame.js
+++ b/packages/components/src/modal/frame.js
@@ -132,6 +132,6 @@ class ModalFrame extends Component {
 
 export default compose( [
 	withFocusReturn,
-	withFocusOutside,
 	withConstrainedTabbing,
+	withFocusOutside,
 ] )( ModalFrame );