Update HeightControl component to label inputs (#63761)

* Update HeightControl component to label inputs

The current method of using a fieldset for the HeightControl inputs leaves neither of them with a functioning accessible name.

This change ensures both the text field and the range slider are named, and semantically linked (with the caveat that aria-controls has little support as of now).

* Changelog entry.

* Tweak instance ID prefix

---------

Co-authored-by: alexstine <alexstine@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: andrewhayward <andrewhayward@git.wordpress.org>

packages/block-editor/src/components/height-control/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 import {
 	BaseControl,
@@ -68,6 +69,10 @@ export default function HeightControl( {
 	value,
 } ) {
 	const customRangeValue = parseFloat( value );
+	const id = useInstanceId( HeightControl, 'block-editor-height-control' );
+	const labelId = `${ id }__label`;
+	const inputId = `${ id }__input`;
+	const rangeId = `${ id }__range`;
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
@@ -144,13 +149,14 @@ export default function HeightControl( {
 	};
 
 	return (
-		<fieldset className="block-editor-height-control">
-			<BaseControl.VisualLabel as="legend">
+		<div className="block-editor-height-control" id={ id }>
+			<BaseControl.VisualLabel as="label" for={ inputId } id={ labelId }>
 				{ label }
 			</BaseControl.VisualLabel>
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
+						id={ inputId }
 						value={ value }
 						units={ units }
 						onChange={ onChange }
@@ -164,6 +170,9 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
+							aria-controls={ inputId }
+							aria-labelledby={ labelId }
+							id={ rangeId }
 							value={ customRangeValue }
 							min={ 0 }
 							max={
@@ -183,6 +192,6 @@ export default function HeightControl( {
 					</Spacer>
 				</FlexItem>
 			</Flex>
-		</fieldset>
+		</div>
 	);
 }

packages/components/CHANGELOG.md

@@ -18,6 +18,7 @@
 -   `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)).
 -   `SelectControl`: Add `"minimal"` variant ([#63265](https://github.com/WordPress/gutenberg/pull/63265)).
 -   `FontSizePicker`: tidy up internal logic ([#63553](https://github.com/WordPress/gutenberg/pull/63553)).
+-   `RangeControl`: Allow external `id` prop ([#63761](https://github.com/WordPress/gutenberg/pull/63761)).
 
 ### Internal
 

packages/components/src/range-control/index.tsx

@@ -41,6 +41,15 @@ import { space } from '../utils/space';
 
 const noop = () => {};
 
+function useUniqueId( idProp?: string ) {
+	const id = useInstanceId(
+		UnforwardedRangeControl,
+		'inspector-range-control'
+	);
+
+	return idProp || id;
+}
+
 function UnforwardedRangeControl(
 	props: WordPressComponentProps< RangeControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -56,6 +65,7 @@ function UnforwardedRangeControl(
 		disabled = false,
 		help,
 		hideLabelFromVision = false,
+		id: idProp,
 		initialPosition,
 		isShiftStepEnabled = true,
 		label,
@@ -123,10 +133,7 @@ function UnforwardedRangeControl(
 		!! marks && 'is-marked'
 	);
 
-	const id = useInstanceId(
-		UnforwardedRangeControl,
-		'inspector-range-control'
-	);
+	const id = useUniqueId( idProp );
 	const describedBy = !! help ? `${ id }__help` : undefined;
 	const enableTooltip = hasTooltip !== false && Number.isFinite( value );