FontAppearanceControl: Add describedBy fallback

WordPress · Aug 30, 2021 · 8161ba7 · 8161ba7
1 parent fa4f49d
commit 8161ba7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -165,6 +165,10 @@ export default function FontAppearanceControl( props ) {
 
 	// Adjusts screen reader description based on styles or weights.
 	const getDescribedBy = () => {
+		if ( ! currentSelection ) {
+			return __( 'No selection' );
+		}
+
 		if ( ! hasFontStyles ) {
 			return sprintf(
 				// translators: %s: Currently selected font weight.

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -79,10 +79,18 @@ export default function CustomSelectControl( {
 		stateReducer,
 	} );
 
-	const controlDescribedBy = describedBy
-		? describedBy
-		: // translators: %s: The selected option.
-		  sprintf( __( 'Currently selected: %s' ), selectedItem.name );
+	function getDescribedBy() {
+		if ( describedBy ) {
+			return describedBy;
+		}
+
+		if ( ! selectedItem ) {
+			return __( 'No selection' );
+		}
+
+		// translators: %s: The selected option.
+		return sprintf( __( 'Currently selected: %s' ), selectedItem.name );
+	}
 
 	const menuProps = getMenuProps( {
 		className: 'components-custom-select-control__menu',
@@ -127,7 +135,7 @@ export default function CustomSelectControl( {
 					'aria-labelledby': undefined,
 					className: 'components-custom-select-control__button',
 					isSmall: true,
-					describedBy: controlDescribedBy,
+					describedBy: getDescribedBy(),
 				} ) }
 			>
 				{ itemToString( selectedItem ) }