Make BorderBoxControl wrapper a fieldset and label a legend

WordPress · Jul 12, 2022 · a9a0c8b · a9a0c8b
1 parent 5de3a05
commit a9a0c8b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -12,7 +12,6 @@ import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
 import BorderBoxControlSplitControls from '../border-box-control-split-controls';
 import { BorderControl } from '../../border-control';
 import { HStack } from '../../h-stack';
-import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
@@ -22,16 +21,16 @@ import type { BorderBoxControlProps } from '../types';
 import type { LabelProps } from '../../border-control/types';
 
 const BorderLabel = ( props: LabelProps ) => {
-	const { label, hideLabelFromVision } = props;
+	const { className, label, hideLabelFromVision } = props;
 
 	if ( ! label ) {
 		return null;
 	}
 
 	return hideLabelFromVision ? (
-		<VisuallyHidden as="label">{ label }</VisuallyHidden>
+		<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 	) : (
-		<StyledLabel>{ label }</StyledLabel>
+		<legend className={ className }>{ label }</legend>
 	);
 };
 
@@ -40,6 +39,7 @@ const BorderBoxControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
+		borderLabelClassName,
 		className,
 		colors,
 		disableCustomColors,
@@ -74,10 +74,16 @@ const BorderBoxControl = (
 		: undefined;
 
 	return (
-		<View className={ className } { ...otherProps } ref={ mergedRef }>
+		<View
+			as="fieldset"
+			className={ className }
+			{ ...otherProps }
+			ref={ mergedRef }
+		>
 			<BorderLabel
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
+				className={ borderLabelClassName }
 			/>
 			<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>
 				{ isLinked ? (

diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -100,12 +100,17 @@ export function useBorderBoxControl(
 		return cx( styles.BorderBoxControl, className );
 	}, [ cx, className ] );
 
+	const borderLabelClassName = useMemo( () => {
+		return cx( styles.borderLabel );
+	}, [ cx ] );
+
 	const linkedControlClassName = useMemo( () => {
 		return cx( styles.LinkedBorderControl );
 	}, [ cx ] );
 
 	return {
 		...otherProps,
+		borderLabelClassName,
 		className: classes,
 		hasMixedBorders: mixedBorders,
 		isLinked,

diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts
@@ -12,7 +12,11 @@ import { space } from '../ui/utils/space';
 import type { Border } from '../border-control/types';
 import type { Borders } from './types';
 
-export const BorderBoxControl = css``;
+export const BorderBoxControl = css`
+	border: 0;
+	padding: 0;
+	margin: 0;
+`;
 
 export const LinkedBorderControl = css`
 	flex: 1;
@@ -78,3 +82,8 @@ export const CenteredBorderControl = css`
 export const rightBorderControl = () => css`
 	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
 `;
+
+export const borderLabel = css`
+	display: inline-block;
+	margin-bottom: ${ space( 2 ) };
+`;