Fix mapped ids

WordPress · Jan 3, 2024 · 7fbbe43 · 7fbbe43
1 parent b28c652
commit 7fbbe43
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
@@ -33,7 +33,9 @@ export default function AllInputControl( {
 	setSelectedUnits,
 	...props
 }: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( AllInputControl, 'box-control-input' );
+	const generatedId = useInstanceId( AllInputControl, 'box-control-input' );
+	const inputId = [ generatedId, LABELS.all ].join( '-' );
+
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
@@ -111,8 +113,6 @@ export default function AllInputControl( {
 				__nextHasNoMarginBottom
 				aria-controls={ inputId }
 				aria-labelledby={ inputId }
-				hideLabelFromVision
-				label={ LABELS.all }
 				onChange={ sliderOnChange }
 				min={ 0 }
 				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }

diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
@@ -29,7 +29,11 @@ export default function AxialInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( AxialInputControls, 'box-control-input' );
+	const generatedId = useInstanceId(
+		AxialInputControls,
+		`box-control-input`
+	);
+
 	const createHandleOnFocus =
 		( side: GroupedSide ) =>
 		( event: React.FocusEvent< HTMLInputElement > ) => {
@@ -133,6 +137,9 @@ export default function AxialInputControls( {
 					side === 'vertical'
 						? selectedUnits.top
 						: selectedUnits.left;
+
+				const inputId = [ generatedId, side ].join( '-' );
+
 				return (
 					<InputWrapper key={ `box-control-${ side }` }>
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
@@ -160,8 +167,6 @@ export default function AxialInputControls( {
 							__nextHasNoMarginBottom
 							aria-controls={ inputId }
 							aria-labelledby={ inputId }
-							hideLabelFromVision
-							label={ LABELS[ side ] }
 							onChange={ ( newValue ) =>
 								handleOnValueChange(
 									side,

diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
@@ -28,7 +28,7 @@ export default function BoxInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( BoxInputControls, 'box-control-input' );
+	const generatedId = useInstanceId( BoxInputControls, 'box-control-input' );
 
 	const createHandleOnFocus =
 		( side: keyof BoxControlValue ) =>
@@ -112,6 +112,8 @@ export default function BoxInputControls( {
 					? parsedUnit
 					: selectedUnits[ side ];
 
+				const inputId = [ generatedId, side ].join( '-' );
+
 				return (
 					<InputWrapper key={ `box-control-${ side }` } expanded>
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
@@ -138,7 +140,6 @@ export default function BoxInputControls( {
 							aria-controls={ inputId }
 							aria-labelledby={ inputId }
 							__nextHasNoMarginBottom
-							hideLabelFromVision
 							onChange={ ( newValue ) => {
 								handleOnValueChange(
 									side,