Add visually hidden labels for split border controls

WordPress · Mar 23, 2022 · 31f7bc8 · 31f7bc8
1 parent 9b6f43b
commit 31f7bc8
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -46,22 +46,30 @@ const BorderBoxControlSplitControls = (
 			<BorderBoxControlVisualizer value={ value } />
 			<BorderControl
 				className={ centeredClassName }
+				hideLabelFromVision={ true }
+				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				hideLabelFromVision={ true }
+				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				hideLabelFromVision={ true }
+				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
 				className={ centeredClassName }
+				hideLabelFromVision={ true }
+				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
 				value={ value?.bottom }
 				{ ...sharedBorderControlProps }