From dbde85e9f1ba9412c32561e387d4a303fbcc8c2b Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 5 Feb 2025 10:40:04 +0530 Subject: [PATCH 1/5] Font Size Picker: Remove Custom option from FontSizePickerSelect dropdown --- .../font-size-picker-select.tsx | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) 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 b33c382f3393e4..fcc80355ddd19a 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 } /> From fdb836e85d648237765e2f095951b6d6ab048208 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Tue, 11 Feb 2025 14:38:35 +0530 Subject: [PATCH 2/5] Test: Fix test - with > 5 homogeneous font sizes --- packages/components/src/font-size-picker/test/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index 34e8ce17c67fa6..249c9c7d827af1 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( [ From 7d6c0ac1365f4be9a2530c082e79c3d474927c4a Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Tue, 11 Feb 2025 14:40:12 +0530 Subject: [PATCH 3/5] Test: Fix test - with > 5 heterogeneous font sizes --- packages/components/src/font-size-picker/test/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index 249c9c7d827af1..c7e75af92bc77c 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -230,7 +230,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' ); @@ -238,7 +238,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( [ From ab709c4ee6e65ff17d6cf49c224b5ce3ff2a1390 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Tue, 11 Feb 2025 14:42:26 +0530 Subject: [PATCH 4/5] Test: Remove custom option selection test --- .../src/font-size-picker/test/index.tsx | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index c7e75af92bc77c..b3612029df3624 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -185,7 +185,6 @@ describe( 'FontSizePicker', () => { } ); - commonSelectTests( fontSizes ); commonTests( fontSizes ); } ); @@ -325,7 +324,6 @@ describe( 'FontSizePicker', () => { } ); - commonSelectTests( fontSizes ); commonTests( fontSizes ); } ); @@ -521,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( From 2118bbd76f986f934bc861d2870570b752fd8007 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 12 Feb 2025 10:00:07 +0530 Subject: [PATCH 5/5] Changelog: Add entry for FontSizePicker accessibility improvement --- packages/components/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c487b0a17a288d..5f06bc110f2d9d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +### Bug Fixes +- `FontSizePicker`: Remove Custom option from dropdown to prevent unexpected context changes during keyboard navigation ([#69038](https://github.com/WordPress/gutenberg/pull/69038)). + ## 29.3.0 (2025-01-29) ### Enhancements