Custom select control: don't announce external value changes (#22815)

* Don't announce external value change

* Correct aria attributes

* Improve value equality checking.

* Selected item doesn't always exist

* Check if value exists and add default

* Fix initial selection

* Memoize getSelectOptions instead

* Switch to useMemo

packages/components/src/font-size-picker/index.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { textColor } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,6 +28,9 @@ function getSelectValueFromFontSize( fontSizes, value ) {
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
+	if ( disableCustomFontSizes && ! optionsArray.length ) {
+		return null;
+	}
 	optionsArray = [
 		{ slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) },
 		...optionsArray,
@@ -51,12 +55,15 @@ export default function FontSizePicker( {
 } ) {
 	const instanceId = useInstanceId( FontSizePicker );
 
-	if ( disableCustomFontSizes && ! fontSizes.length ) {
+	const options = useMemo(
+		() => getSelectOptions( fontSizes, disableCustomFontSizes ),
+		[ fontSizes, disableCustomFontSizes ]
+	);
+
+	if ( ! options ) {
 		return null;
 	}
 
-	const options = getSelectOptions( fontSizes, disableCustomFontSizes );
-
 	const selectedFontSizeSlug = getSelectValueFromFontSize( fontSizes, value );
 
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;