Add id for slider aria labels

WordPress · Dec 12, 2023 · 3192ad7 · 3192ad7
1 parent eb8ebe8
commit 3192ad7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
@@ -1,3 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -29,6 +33,7 @@ export default function AllInputControl( {
 	setSelectedUnits,
 	...props
 }: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( AllInputControl, 'box-control-input' );
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
@@ -86,6 +91,7 @@ export default function AllInputControl( {
 			<UnitControl
 				{ ...props }
 				disableUnits={ isMixed }
+				id={ inputId }
 				isOnly
 				value={ parsedQuantity }
 				onChange={ handleOnChange }
@@ -98,6 +104,8 @@ export default function AllInputControl( {
 
 			<FlexedRangeControl
 				__nextHasNoMarginBottom
+				aria-controls={ inputId }
+				aria-labelledby={ inputId }
 				hideLabelFromVision
 				initialPosition={ parsedQuantity ?? 0 }
 				label={ LABELS.all }

diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
@@ -1,3 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -25,6 +29,7 @@ export default function AxialInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( AxialInputControls, 'box-control-input' );
 	const createHandleOnFocus =
 		( side: GroupedSide ) =>
 		( event: React.FocusEvent< HTMLInputElement > ) => {
@@ -148,6 +153,7 @@ export default function AxialInputControls( {
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
 						<UnitControl
 							{ ...props }
+							id={ inputId }
 							isFirst={ first === side }
 							isLast={ last === side }
 							isOnly={ only === side }
@@ -165,6 +171,8 @@ export default function AxialInputControls( {
 						/>
 						<FlexedRangeControl
 							__nextHasNoMarginBottom
+							aria-controls={ inputId }
+							aria-labelledby={ inputId }
 							hideLabelFromVision
 							initialPosition={ parsedQuantity ?? 0 }
 							label={ LABELS[ side ] }

diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
@@ -1,3 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -25,6 +29,8 @@ export default function BoxInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( BoxInputControls, 'box-control-input' );
+
 	const createHandleOnFocus =
 		( side: keyof BoxControlValue ) =>
 		( event: React.FocusEvent< HTMLInputElement > ) => {
@@ -122,6 +128,7 @@ export default function BoxInputControls( {
 							isFirst={ first === side }
 							isLast={ last === side }
 							isOnly={ only === side }
+							id={ inputId }
 							value={ [ parsedQuantity, computedUnit ].join(
 								''
 							) }
@@ -134,10 +141,11 @@ export default function BoxInputControls( {
 						/>
 
 						<FlexedRangeControl
+							aria-controls={ inputId }
+							aria-labelledby={ inputId }
 							__nextHasNoMarginBottom
 							hideLabelFromVision
 							initialPosition={ parsedQuantity ?? 0 }
-							label={ LABELS[ side ] }
 							onChange={ ( newValue ) => {
 								sliderOnChange(
 									side,