From e506868e454cd8e0d737356fe560f6b9ab390928 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 27 Nov 2024 19:19:32 +0100
Subject: [PATCH] make resize handles focusable

---
 packages/components/src/resizable-box/index.tsx  | 11 ++++++-----
 packages/components/src/resizable-box/style.scss |  7 +++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 38a8b54ab65790..e24997b21eec52 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -112,14 +112,15 @@ function UnforwardedResizableBox(
 				showHandle && 'has-show-handle',
 				className
 			) }
+			handleComponent={ Object.fromEntries(
+				Object.keys( HANDLE_CLASSES ).map( ( key ) => [
+					key,
+					<div key={ key } tabIndex={ -1 } />,
+				] )
+			) }
 			handleClasses={ HANDLE_CLASSES }
 			handleStyles={ HANDLE_STYLES }
 			ref={ ref }
-			// Resizable unfortunately does provide focusable drag handles
-			// (as it should), so capture focus here to prevent block drag
-			// from being triggered.
-			// @ts-expect-error
-			tabIndex={ -1 }
 			{ ...props }
 		>
 			{ children }
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 3c9efd27136460..0ac990b3f60827 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -15,6 +15,13 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	.components-resizable-box__container.has-show-handle & {
 		display: block;
 	}
+
+	> div {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: z-index(".components-resizable-box__handle");
+	}
 }
 
 // Make the image inside the resize to get the full width