From 15dd9769eb55aad8afd49e323c48443aa685eed0 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 28 Jan 2025 15:50:24 +0100
Subject: [PATCH] Simplify fieldset labeling to avoid repetition.

---
 .../components/src/font-size-picker/index.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 9cc577e4451216..aa81e4ef668d34 100644
--- 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={