From 4d21eaddfb7305642839127f9bd338aaa1bf5849 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 25 Sep 2018 20:31:59 +0200
Subject: [PATCH] Handle edge cases in with-constrained-tabbing.

---
 .../src/higher-order/with-constrained-tabbing/index.js    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/src/higher-order/with-constrained-tabbing/index.js b/packages/components/src/higher-order/with-constrained-tabbing/index.js
index 8d1574e0a2019..75745cc9d0242 100644
--- a/packages/components/src/higher-order/with-constrained-tabbing/index.js
+++ b/packages/components/src/higher-order/with-constrained-tabbing/index.js
@@ -33,6 +33,13 @@ const withConstrainedTabbing = createHigherOrderComponent(
 			} else if ( ! event.shiftKey && event.target === lastTabbable ) {
 				event.preventDefault();
 				firstTabbable.focus();
+			/*
+			 * When pressing Tab and none of the tabbables has focus, the keydown
+			 * event happens on the wrapper div: move focus on the first tabbable.
+			 */
+			} else if ( ! tabbables.includes( event.target ) ) {
+				event.preventDefault();
+				firstTabbable.focus();
 			}
 		}
 
@@ -44,6 +51,7 @@ const withConstrainedTabbing = createHigherOrderComponent(
 				<div
 					onKeyDown={ this.handleTabBehaviour }
 					ref={ this.focusContainRef }
+					tabIndex="-1"
 				>
 					<WrappedComponent { ...this.props } />
 				</div>