Handle edge cases in with-constrained-tabbing.

WordPress · Sep 25, 2018 · 4d21ead · 4d21ead
1 parent 6321a99
commit 4d21ead
Showing 1 changed file with 8 additions and 0 deletions.
diff --git 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>