From 806a6158a0d7cf5645be5e5bd0b907735ef506cc Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 22:35:44 -0400
Subject: [PATCH] Refine UI for BoxControl

---
 packages/components/src/box-control/index.js  | 16 ++++++++---
 .../src/box-control/input-controls.js         | 26 +++++++-----------
 .../box-control/styles/box-control-styles.js  | 27 ++++++++++++++-----
 .../components/src/box-control/visualizer.js  |  2 +-
 .../components/src/input-control/index.js     |  7 ++++-
 .../styles/input-control-styles.js            | 13 +++++++--
 .../components/src/utils/colors-values.js     |  1 +
 7 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index e0d485459902bd..4709dbfd1294bf 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -5,14 +5,15 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import Visualizer from './visualizer';
-import { FlexItem } from '../flex';
 import InputControls from './input-controls';
+import Text from '../text';
 import { DEFAULT_VALUES, parseValues } from './utils';
 import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
@@ -20,7 +21,14 @@ const defaultInputProps = {
 	min: 0,
 };
 
+function useUniqueId( idProp ) {
+	const instanceId = useInstanceId( BoxControl );
+	const id = `inspector-box-control-${ instanceId }`;
+
+	return idProp || id;
+}
 export default function BoxControl( {
+	idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
@@ -29,6 +37,8 @@ export default function BoxControl( {
 	units = false,
 } ) {
 	const [ values, setValues ] = useState( parseValues( valuesProp ) );
+	const id = useUniqueId( idProp );
+	const headingId = `${ id }-heading`;
 
 	const updateValues = ( nextValues ) => {
 		const mergedValues = { ...values, ...nextValues };
@@ -37,9 +47,9 @@ export default function BoxControl( {
 	};
 
 	return (
-		<Root>
+		<Root id={ id } role="region" aria-labelledby={ headingId }>
 			<Header>
-				<FlexItem>{ label }</FlexItem>
+				<Text id={ headingId }>{ label }</Text>
 			</Header>
 			<LayoutContainer>
 				<InputControls
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index d7bcd6cd49cf8c..31c750d5c23dab 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -8,7 +8,12 @@ import { noop } from 'lodash';
  */
 import UnitControl from './unit-control';
 import { getValues } from './utils';
-import { Layout, LayoutBox, SideIndicator } from './styles/box-control-styles';
+import {
+	Layout,
+	LayoutBox,
+	SideIndicatorX,
+	SideIndicatorY,
+} from './styles/box-control-styles';
 import { useRtl } from '../utils/style-mixins';
 
 export default function BoxInputControls( {
@@ -39,22 +44,9 @@ export default function BoxInputControls( {
 
 	return (
 		<Layout>
-			<SideIndicator
-				style={ {
-					left: '50%',
-					top: '50%',
-					transform: 'translate(0, -30px)',
-				} }
-			/>
-			<SideIndicator
-				style={ {
-					left: '50%',
-					top: '0%',
-					height: '75%',
-					transform: 'rotate(-90deg) translate(-15px, 0px)',
-				} }
-			/>
-			<LayoutBox />
+			<SideIndicatorX aria-hidden="true" />
+			<SideIndicatorY aria-hidden="true" />
+			<LayoutBox aria-hidden="true" />
 			<UnitControl
 				{ ...props }
 				disableUnits
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 81af7db0f76bf7..97fe78e69a85e4 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -10,10 +10,13 @@ import { color } from '../../utils/style-mixins';
 
 export const Root = styled.div`
 	max-width: 300px;
+	padding-bottom: 12px;
+	width: 100%;
 `;
 
 export const Header = styled( Flex )`
-	margin-bottom: 8px;
+	color: ${color( 'ui.label' )};
+	padding-bottom: 8px;
 `;
 
 export const UnitControlWrapper = styled.div`
@@ -24,14 +27,13 @@ export const UnitControlWrapper = styled.div`
 export const LayoutContainer = styled( Flex )`
 	height: 120px;
 	justify-content: center;
-	padding-bottom: 16px;
 `;
 
 export const Layout = styled.div`
 	box-sizing: border-box;
 	position: relative;
 	height: 120px;
-	width: 200px;
+	width: 100%;
 `;
 
 export const LayoutBox = styled.div`
@@ -46,9 +48,22 @@ export const LayoutBox = styled.div`
 `;
 
 export const SideIndicator = styled.div`
-	height: 50%;
-	border-left: 1px dashed ${color( 'ui.borderLight' )};
-	width: 0;
+	box-sizing: border-box;
 	position: absolute;
 	pointer-events: none;
 `;
+
+export const SideIndicatorX = styled( SideIndicator )`
+	border-top: 1px dashed ${color( 'ui.borderLight' )};
+	top: 50%;
+	left: 0;
+	width: 100%;
+`;
+
+export const SideIndicatorY = styled( SideIndicator )`
+	border-left: 1px dashed ${color( 'ui.borderLight' )};
+	top: 50%;
+	left: 50%;
+	transform: translate( 0, calc( -50% - 3px ) );
+	height: 50%;
+`;
diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index 4d1096e3aac5fc..f2b0a177de2608 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -22,7 +22,7 @@ export default function BoxControlVisualizer( {
 	const values = parseValues( valuesProp );
 
 	return (
-		<Container { ...props }>
+		<Container { ...props } aria-hidden="true">
 			<Sides values={ values } />
 			{ children }
 		</Container>
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index cd53d6f0d941ef..5f9c651777c85b 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -101,11 +101,16 @@ export function InputControl(
 					value={ value }
 				/>
 				<Fieldset
+					aria-hidden="true"
 					isFloatingLabel={ isFloatingLabelSet }
 					isFocused={ isFocused }
 				>
 					{ isFloatingLabelSet && (
-						<Legend isFloating={ isFloating } size={ size }>
+						<Legend
+							aria-hidden="true"
+							isFloating={ isFloating }
+							size={ size }
+						>
 							<LegendText>{ label }</LegendText>
 						</Legend>
 					) }
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 18835ffe9dada9..0cbde82bd087da 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -7,6 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
+import Text from '../../text';
 import { color, rtl, reduceMotion } from '../../utils/style-mixins';
 
 const FLOATING_LABEL_TRANSITION_SPEED = '60ms';
@@ -167,11 +168,13 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 	);
 };
 
-export const Label = styled.label`
+const BaseLabel = styled( Text )`
 	&&& {
 		box-sizing: border-box;
 		display: block;
 		margin: 0;
+		padding: 0;
+		pointer-events: none;
 		top: 50%;
 		transition: transform ${FLOATING_LABEL_TRANSITION_SPEED} linear;
 		z-index: 1;
@@ -185,6 +188,8 @@ export const Label = styled.label`
 	}
 `;
 
+export const Label = ( props ) => <BaseLabel { ...props } as="label" />;
+
 const fieldsetTopStyles = ( { isFloatingLabel } ) => {
 	const top = isFloatingLabel ? -5 : 0;
 	return css( { top } );
@@ -251,8 +256,12 @@ export const Legend = styled.legend`
 	}
 `;
 
-export const LegendText = styled.span`
+const BaseLegendText = styled( Text )`
 	box-sizing: border-box;
 	display: inline-block;
 	${rtl( { paddingLeft: 4, paddingRight: 5 } )}
 `;
+
+export const LegendText = ( props ) => (
+	<BaseLegendText { ...props } as="span" />
+);
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 38d6a6f5030164..7f869e7781145a 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -140,6 +140,7 @@ export const UI = {
 	border: BASE.black,
 	borderFocus: BLUE.medium.focus,
 	borderLight: LIGHT_GRAY[ 600 ],
+	label: DARK_GRAY[ 500 ],
 };
 
 export const COLORS = {