Font Size Picker: Remove Custom option from FontSizePickerSelect drop…

…down (#69038) * Font Size Picker: Remove Custom option from FontSizePickerSelect dropdown * Test: Fix test - with > 5 homogeneous font sizes * Test: Fix test - with > 5 heterogeneous font sizes * Test: Remove custom option selection test * Changelog: Add entry for FontSizePicker accessibility improvement Co-authored-by: himanshupathak95 <[email protected]> Co-authored-by: afercia <[email protected]>
WordPress · Feb 12, 2025 · 9182d59 · 9182d59
1 parent a507759
commit 9182d59
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 48 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   `FontSizePicker`: Remove Custom option from dropdown to prevent unexpected context changes during keyboard navigation ([#69038](https://github.com/WordPress/gutenberg/pull/69038)).
+
 -   `ComboboxControl`: Add an `isLoading` prop to show a loading spinner ([#68990](https://github.com/WordPress/gutenberg/pull/68990))
 
 ## 29.3.0 (2025-01-29)

diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx
@@ -20,21 +20,8 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	value: undefined,
 };
 
-const CUSTOM_OPTION: FontSizePickerSelectOption = {
-	key: 'custom',
-	name: __( 'Custom' ),
-};
-
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const {
-		__next40pxDefaultSize,
-		fontSizes,
-		value,
-		disableCustomFontSizes,
-		size,
-		onChange,
-		onSelectCustom,
-	} = props;
+	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
 
 	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
 
@@ -59,12 +46,10 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				hint,
 			};
 		} ),
-		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
 	];
 
-	const selectedOption = value
-		? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION
-		: DEFAULT_OPTION;
+	const selectedOption =
+		options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION;
 
 	return (
 		<CustomSelectControl
@@ -86,11 +71,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			}: {
 				selectedItem: FontSizePickerSelectOption;
 			} ) => {
-				if ( selectedItem === CUSTOM_OPTION ) {
-					onSelectCustom();
-				} else {
-					onChange( selectedItem.value );
-				}
+				onChange( selectedItem.value );
 			} }
 			size={ size }
 		/>

diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
@@ -127,15 +127,14 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
-			expect( options ).toHaveLength( 8 );
+			expect( options ).toHaveLength( 7 );
 			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[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
@@ -186,7 +185,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -231,15 +229,14 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
-			expect( options ).toHaveLength( 8 );
+			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
 			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1em' );
 			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 2rem' );
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Large' );
 			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
 			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
-			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
@@ -327,7 +324,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -523,24 +519,6 @@ describe( 'FontSizePicker', () => {
 		);
 	}
 
-	function commonSelectTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when Custom is selected', async () => {
-			const user = userEvent.setup();
-			const onChange = jest.fn();
-			await render(
-				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
-			);
-			await user.click(
-				screen.getByRole( 'combobox', { name: 'Font size' } )
-			);
-			await user.click(
-				screen.getByRole( 'option', { name: 'Custom' } )
-			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
-			expect( onChange ).not.toHaveBeenCalled();
-		} );
-	}
-
 	function commonTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when value is unknown', async () => {
 			await render(

diff --git a/schemas/json/wp-env.json b/schemas/json/wp-env.json
@@ -149,7 +149,12 @@
 						"$ref": "#/definitions/wpEnvPropertyNames"
 					},
 					{
-						"enum": [ "$schema", "env", "testsPort", "lifecycleScripts" ]
+						"enum": [
+							"$schema",
+							"env",
+							"testsPort",
+							"lifecycleScripts"
+						]
 					}
 				]
 			}