diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index 34e8ce17c67fa..ee857c55abf1e 100644
--- a/packages/components/src/font-size-picker/test/index.tsx
+++ b/packages/components/src/font-size-picker/test/index.tsx
@@ -52,7 +52,9 @@ describe( 'FontSizePicker', () => {
 			await render(
 				<FontSizePicker value={ value } onChange={ onChange } />
 			);
-			const input = screen.getByLabelText( 'Custom' );
+			const input = screen.getByRole( 'spinbutton', {
+				name: 'Font size',
+			} );
 			await user.clear( input );
 			await user.type( input, '80' );
 			expect( onChange ).toHaveBeenCalledTimes( 3 ); // Once for the clear, then once per keystroke.
@@ -79,7 +81,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			const input = screen.getByLabelText( 'Custom' );
+			const input = screen.getByRole( 'spinbutton', {
+				name: 'Font size',
+			} );
 			await user.type( input, '80' );
 			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
 			expect( onChange ).toHaveBeenCalledWith( expectedValue );
@@ -129,29 +133,15 @@ describe( 'FontSizePicker', () => {
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 8 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
-			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
-			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
-			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16' );
-			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
-			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
-			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12px' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16px' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20px' );
+			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
+			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
 			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size (px)' },
-			{ value: '8px', expectedLabel: 'Size (px)' },
-			{ value: '3px', expectedLabel: 'Size Custom' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{
 				option: 'Default',
@@ -159,7 +149,7 @@ describe( 'FontSizePicker', () => {
 				expectedArguments: [ undefined ],
 			},
 			{
-				option: 'Tiny 8',
+				option: 'Tiny 8px',
 				value: undefined,
 				expectedArguments: [ '8px', fontSizes[ 0 ] ],
 			},
@@ -258,23 +248,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '8px', expectedLabel: 'Size' },
-			{ value: '1em', expectedLabel: 'Size' },
-			{ value: '2rem', expectedLabel: 'Size' },
-			{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
-			{ value: '3px', expectedLabel: 'Size Custom' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{
 				option: 'Default',
@@ -376,20 +349,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Gigantosaurus' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '12px', expectedLabel: 'Size Small' },
-			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
@@ -443,25 +402,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 3 ] ).toHaveAccessibleName( 'Extra Large' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '12px', expectedLabel: 'Size Small' },
-			{ value: '1em', expectedLabel: 'Size Medium' },
-			{ value: '2rem', expectedLabel: 'Size Large' },
-			{
-				value: 'clamp(1.75rem, 3vw, 2.25rem)',
-				expectedLabel: 'Size Extra Large',
-			},
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{ radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] },
 			{ radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] },
@@ -536,7 +476,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'option', { name: 'Custom' } )
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 			expect( onChange ).not.toHaveBeenCalled();
 		} );
 	}
@@ -546,14 +488,18 @@ describe( 'FontSizePicker', () => {
 			await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 		} );
 
 		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
 			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 
 			rerender(
 				<FontSizePicker
@@ -571,7 +517,9 @@ describe( 'FontSizePicker', () => {
 			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 
 			rerender(
 				<FontSizePicker
@@ -579,7 +527,9 @@ describe( 'FontSizePicker', () => {
 					value={ fontSizes[ 0 ].size }
 				/>
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 		} );
 
 		it( 'allows custom values by default', async () => {
@@ -591,7 +541,10 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } ),
+				'80'
+			);
 			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
 			expect( onChange ).toHaveBeenCalledWith( '80px' );
 		} );
@@ -607,7 +560,10 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
 
-			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } ),
+				'80'
+			);
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Use size preset' } )
@@ -654,7 +610,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			const sliderInput = screen.getByLabelText( 'Custom Size' );
+			const sliderInput = screen.getByRole( 'slider', {
+				name: 'Font size',
+			} );
 			fireEvent.change( sliderInput, {
 				target: { value: 80 },
 			} );