From 59595f6d0f44d7cce27c20df8f8b58a72f021afa Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 17 Sep 2024 15:54:27 +0200
Subject: [PATCH] Fix the shadows Range control accessibility and usability
 (#63908)

* Use real labels instaed of headings or aria-labels.

* Simplify by removing RangeControl.

* Remove unnecessary HStack and className.

* Remove no longer used hasNegativeRange prop.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
---
 .../global-styles/shadows-edit-panel.js       | 69 ++-----------------
 1 file changed, 7 insertions(+), 62 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index cf49d8c28ebcb9..ec1dd1a900c3bf 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -13,7 +13,6 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalUseNavigator as useNavigator,
@@ -21,7 +20,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Dropdown,
-	RangeControl,
 	Button,
 	Flex,
 	FlexItem,
@@ -35,7 +33,6 @@ import {
 	plus,
 	shadow as shadowIcon,
 	reset,
-	settings,
 	moreVertical,
 } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
@@ -51,7 +48,6 @@ import {
 	getShadowParts,
 	shadowStringToObject,
 	shadowObjectToString,
-	CUSTOM_VALUE_SETTINGS,
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -464,13 +460,11 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'x', value ) }
 				/>
 				<ShadowInputControl
 					label={ __( 'Y Position' ) }
 					value={ shadowObj.y }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'y', value ) }
 				/>
 				<ShadowInputControl
@@ -481,7 +475,6 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'Spread' ) }
 					value={ shadowObj.spread }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
 			</Grid>
@@ -489,16 +482,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	);
 }
 
-function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
-	const [ isCustomInput, setIsCustomInput ] = useState( false );
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( value );
-
-	const sliderOnChange = ( next ) => {
-		onChange(
-			next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
-		);
-	};
+function ShadowInputControl( { label, value, onChange } ) {
 	const onValueChange = ( next ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : '0px';
@@ -506,50 +490,11 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	};
 
 	return (
-		<VStack justify="flex-start">
-			<HStack justify="space-between">
-				<Subtitle>{ label }</Subtitle>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</HStack>
-			{ isCustomInput ? (
-				<UnitControl
-					label={ label }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ value }
-					onChange={ onValueChange }
-				/>
-			) : (
-				<RangeControl
-					value={ parsedQuantity ?? 0 }
-					onChange={ sliderOnChange }
-					withInputField={ false }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					min={
-						hasNegativeRange
-							? -(
-									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
-										?.max ?? 10
-							  )
-							: 0
-					}
-					max={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
-					}
-					step={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-					}
-				/>
-			) }
-		</VStack>
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
 	);
 }