Simplify fieldset labeling to avoid repetition.

WordPress · Feb 3, 2025 · 15dd976 · 15dd976
1 parent d8fd7b0
commit 15dd976
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -9,6 +9,7 @@ import type { ForwardedRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import {
 	parseQuantityAndUnitFromRawValue,
 	useCustomUnits,
 } from '../unit-control';
-import { VisuallyHidden } from '../visually-hidden';
 import type { FontSizePickerProps } from './types';
 import { Container, Header, HeaderLabel, HeaderToggle } from './styles';
 import { Spacer } from '../spacer';
@@ -50,6 +50,11 @@ const UnforwardedFontSizePicker = (
 		withReset = true,
 	} = props;
 
+	const labelId = useInstanceId(
+		UnforwardedFontSizePicker,
+		'font-size-picker-label'
+	);
+
 	const units = useCustomUnits( {
 		availableUnits: unitsProp,
 	} );
@@ -100,11 +105,17 @@ const UnforwardedFontSizePicker = (
 	} );
 
 	return (
-		<Container ref={ ref } className="components-font-size-picker">
-			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
+		<Container
+			ref={ ref }
+			className="components-font-size-picker"
+			// This Container component renders a fieldset element that needs to be labeled.
+			aria-labelledby={ labelId }
+		>
 			<Spacer>
 				<Header className="components-font-size-picker__header">
-					<HeaderLabel>{ __( 'Font size' ) }</HeaderLabel>
+					<HeaderLabel id={ labelId }>
+						{ __( 'Font size' ) }
+					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
 						<HeaderToggle
 							label={