Add labels to slider

WordPress · Jan 10, 2024 · 6dc8d44 · 6dc8d44
1 parent ced9711
commit 6dc8d44
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
@@ -90,6 +90,8 @@ export default function AllInputControl( {
 			<FlexedRangeControl
 				__nextHasNoMarginBottom
 				aria-controls={ inputId }
+				label={ LABELS.all }
+				hideLabelFromVision
 				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
@@ -127,7 +127,8 @@ export default function AxialInputControls( {
 						<FlexedRangeControl
 							__nextHasNoMarginBottom
 							aria-controls={ inputId }
-							aria-labelledby={ inputId }
+							label={ LABELS[ side ] }
+							hideLabelFromVision
 							onChange={ ( newValue ) =>
 								handleOnValueChange(
 									side,

diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
@@ -130,9 +130,10 @@ export default function BoxInputControls( {
 						</Tooltip>
 
 						<FlexedRangeControl
-							aria-controls={ inputId }
-							aria-labelledby={ inputId }
 							__nextHasNoMarginBottom
+							aria-controls={ inputId }
+							label={ LABELS[ side ] }
+							hideLabelFromVision
 							onChange={ ( newValue ) => {
 								handleOnValueChange(
 									side,