Use real labels instaed of headings or aria-labels.

WordPress · Jul 24, 2024 · a877444 · a877444
1 parent 0b94a19
commit a877444
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 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
@@ -15,7 +15,6 @@ import {
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -455,7 +454,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 						label={ __( 'Inset' ) }
 					/>
 				</ToggleGroupControl>
-				<Grid columns={ 2 } gap={ 4 }>
+				<VStack gap={ 4 }>
 					<ShadowInputControl
 						label={ __( 'X Position' ) }
 						value={ shadowObj.x }
@@ -483,7 +482,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 							onShadowChange( 'spread', value )
 						}
 					/>
-				</Grid>
+				</VStack>
 			</VStack>
 		</div>
 	);
@@ -506,29 +505,18 @@ 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>
+		<HStack align="flex-end">
 			{ isCustomInput ? (
 				<UnitControl
 					label={ label }
-					hideLabelFromVision
 					__next40pxDefaultSize
 					value={ value }
 					onChange={ onValueChange }
+					className="edit-site-global-styles__shadow-editor-control"
 				/>
 			) : (
 				<RangeControl
+					label={ label }
 					value={ parsedQuantity ?? 0 }
 					onChange={ sliderOnChange }
 					withInputField={ false }
@@ -548,8 +536,24 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 					step={
 						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
 					}
+					className="edit-site-global-styles__shadow-editor-control"
 				/>
 			) }
-		</VStack>
+			<Flex
+				expanded={ false }
+				align="center"
+				className="edit-site-global-styles__shadow-editor-control-toggle-wrapper"
+			>
+				<Button
+					label={ __( 'Use custom size' ) }
+					icon={ settings }
+					onClick={ () => {
+						setIsCustomInput( ! isCustomInput );
+					} }
+					isPressed={ isCustomInput }
+					size="small"
+				/>
+			</Flex>
+		</HStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -145,6 +145,15 @@
 		// color palette adds empty .components-circular-option-picker
 		margin-bottom: -1 * $grid-unit-05;
 	}
+
+	.edit-site-global-styles__shadow-editor-control {
+		flex-grow: 1;
+	}
+
+	.edit-site-global-styles__shadow-editor-control-toggle-wrapper {
+		// Make the button wrapper height the same as the adjacent input height.
+		height: $button-size-next-default-40px;
+	}
 }
 
 .edit-site-global-styles__shadow-editor__dropdown {