Fix label output and remove combobox role.

WordPress · Sep 25, 2019 · 69c011c · 69c011c
1 parent 39d802d
commit 69c011c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -17,7 +17,8 @@ function getSelectValueFromFontSize( fontSizes, value ) {
 		const fontSizeValue = fontSizes.find( ( font ) => font.size === value );
 		return fontSizeValue ? fontSizeValue.slug : 'custom';
 	}
-	return 'normal';
+	// We can't be sure what the theme font settings are so let's assume the "normal" size will be second if there are more than 2 sizes, and first if there are 2 or less.
+	return fontSizes.length > 2 ? fontSizes[ 1 ].slug : fontSizes[ 0 ].slug;
 }
 
 function getSelectOptions( optionsArray ) {

diff --git a/packages/components/src/font-size-picker/select.js b/packages/components/src/font-size-picker/select.js
@@ -6,7 +6,7 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/compose';
 import { useState, useRef, useCallback, useEffect } from '@wordpress/element';
 
@@ -27,11 +27,7 @@ function FontSizePickerSelect( {
 	value,
 } ) {
 	const currentFont = fontSizes.find( ( font ) => font.value === value );
-	const currentFontName =
-    ( currentFont && currentFont.name ) ||
-    ( ! value && _x( 'Normal', 'font size name' ) ) ||
-    _x( 'Custom', 'font size name' );
-	const currentFontSlug = currentFont ? currentFont.slug : '';
+	const currentFontLabel = currentFont ? currentFont.label : '';
 
 	const onChangeValue = ( event ) => {
 		const newValue = event.target.value;
@@ -115,11 +111,9 @@ function FontSizePickerSelect( {
 	};
 
 	// Improve voiceover consistency compared to native select
-	const buttonRole = 'combobox';
-	const ariaActiveDescendant = `item-${ currentFontSlug }`;
+	const ariaActiveDescendant = `item-${ value }`;
 	const ariaHasPopup = 'listbox';
 	const ariaProps = {
-		role: buttonRole,
 		'aria-haspopup': ariaHasPopup,
 		'aria-activedescendant': ariaActiveDescendant,
 	};
@@ -145,12 +139,11 @@ function FontSizePickerSelect( {
 						className="components-font-size-picker__select-selector"
 						isLarge
 						onClick={ onToggle }
-						aria-expanded={ isOpen }
-						aria-label={ __( 'Font Size' ) }
+						aria-label={ __( 'Choose Preset' ) }
 						onKeyDown={ handleOnButtonKeyDown }
 						{ ...ariaProps }
 					>
-						{ currentFontName }
+						{ currentFontLabel }
 					</Button>
 				) }
 				renderContent={ () => {