From 9182d59c4f286a0ead7f5c36f76c49b04f1a2310 Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Wed, 12 Feb 2025 15:23:26 +0530 Subject: [PATCH] Font Size Picker: Remove Custom option from FontSizePickerSelect dropdown (#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 Co-authored-by: afercia --- packages/components/CHANGELOG.md | 2 ++ .../font-size-picker-select.tsx | 27 +++---------------- .../src/font-size-picker/test/index.tsx | 26 ++---------------- schemas/json/wp-env.json | 7 ++++- 4 files changed, 14 insertions(+), 48 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a36773a8e16d6..4ff01907284a4 100644 --- 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 index b33c382f3393e..fcc80355ddd19 100644 --- 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 ( { }: { 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 index 34e8ce17c67fa..b3612029df362 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -127,7 +127,7 @@ 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' ); @@ -135,7 +135,6 @@ describe( 'FontSizePicker', () => { 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,7 +229,7 @@ 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' ); @@ -239,7 +237,6 @@ describe( 'FontSizePicker', () => { 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( - - ); - 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 index 2a98cb3d0d263..bc54c6ee9ea2e 100644 --- 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" + ] } ] }