make resize handles focusable

WordPress · Nov 27, 2024 · e506868 · e506868
1 parent 28b8d88
commit e506868
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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