Font Size Picker: update changelog for #45041 (#45180)

* Update changelog for #45041 Fallback to font size slug if name is undefined * Adding an aria-label to the header hint label Adding unit tests to cover the label using `slug` if `name` isn't available.
WordPress · Oct 21, 2022 · 8bfbb9a · 8bfbb9a
1 parent fa22a90
commit 8bfbb9a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### Bug Fix
 
 -   `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)).
+-   `FontSizePicker`: Fallback to font size `slug` if `name` is undefined  ([#45041](https://github.com/WordPress/gutenberg/pull/45041)).
 
 ### Internal
 

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -169,12 +169,15 @@ const UnforwardedFontSizePicker = (
 		__( 'Currently selected font size: %s' ),
 		selectedOption.name
 	);
+
+	const headerAriaLabel = `${ __( 'Size' ) } ${ headerHint || '' }`;
+
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
 				<HStack className="components-font-size-picker__header">
-					<HeaderLabel>
+					<HeaderLabel aria-label={ headerAriaLabel }>
 						{ __( 'Size' ) }
 						{ headerHint && (
 							<HeaderHint className="components-font-size-picker__header__hint">

diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
@@ -244,6 +244,47 @@ describe( 'FontSizePicker', () => {
 					'XL'
 				);
 			} );
+			it( 'should use font size `slug` for for header hint label by default', () => {
+				const fontSizes = [
+					{
+						name: 'Allosaurus Large',
+						slug: 'allosaurus-l',
+						size: '20rem',
+					},
+				];
+				render(
+					<FontSizePicker
+						fontSizes={ fontSizes }
+						value={ fontSizes[ 0 ].size }
+						__nextHasNoMarginBottom
+					/>
+				);
+
+				const largeFontSizeElement = screen.getByLabelText(
+					'Size Allosaurus Large(rem)'
+				);
+				expect( largeFontSizeElement ).toBeInTheDocument();
+			} );
+			it( 'should fallback to font size `slug` for header hint label if `name` is undefined', () => {
+				const fontSizes = [
+					{
+						slug: 'gigantosaurus',
+						size: '1000px',
+					},
+				];
+				render(
+					<FontSizePicker
+						fontSizes={ fontSizes }
+						value={ fontSizes[ 0 ].size }
+						__nextHasNoMarginBottom
+					/>
+				);
+
+				const giganticFontSizeElement = screen.getByLabelText(
+					'Size gigantosaurus(px)'
+				);
+				expect( giganticFontSizeElement ).toBeInTheDocument();
+			} );
 		} );
 	} );
 } );