Font Size Picker: Use a menuitemradio role and better labels. (#12372)

* Use a menuitemradio role and better labels. * Restore Button and remove MenuItem import. * Use template literals.
WordPress · Dec 8, 2018 · d385f3d · d385f3d
1 parent 8e772be
commit d385f3d
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -6,8 +6,7 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/compose';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -37,6 +36,7 @@ function FontSizePicker( {
 	};
 
 	const currentFont = fontSizes.find( ( font ) => font.size === value );
+	const currentFontSizeName = ( currentFont && currentFont.name ) || ( ! value && _x( 'Normal', 'font size name' ) ) || _x( 'Custom', 'font size name' );
 
 	return (
 		<BaseControl label={ __( 'Font Size' ) }>
@@ -51,26 +51,34 @@ function FontSizePicker( {
 							isLarge
 							onClick={ onToggle }
 							aria-expanded={ isOpen }
-							aria-label={ __( 'Custom font size' ) }
+							aria-label={ sprintf(
+								/* translators: %s: font size name */
+								__( 'Font size: %s' ), currentFontSizeName
+							) }
 						>
-							{ ( currentFont && currentFont.name ) || ( ! value && _x( 'Normal', 'font size name' ) ) || _x( 'Custom', 'font size name' ) }
+							{ currentFontSizeName }
 						</Button>
 					) }
 					renderContent={ () => (
 						<NavigableMenu>
-							{ map( fontSizes, ( { name, size, slug } ) => (
-								<Button
-									key={ slug }
-									onClick={ () => onChange( slug === 'normal' ? undefined : size ) }
-									className={ 'is-font-' + slug }
-									role="menuitem"
-								>
-									{ ( value === size || ( ! value && slug === 'normal' ) ) &&	<Dashicon icon="saved" /> }
-									<span className="components-font-size-picker__dropdown-text-size" style={ { fontSize: size } }>
-										{ name }
-									</span>
-								</Button>
-							) ) }
+							{ map( fontSizes, ( { name, size, slug } ) => {
+								const isSelected = ( value === size || ( ! value && slug === 'normal' ) );
+
+								return (
+									<Button
+										key={ slug }
+										onClick={ () => onChange( slug === 'normal' ? undefined : size ) }
+										className={ `is-font-${ slug }` }
+										role="menuitemradio"
+										aria-checked={ isSelected }
+									>
+										{ isSelected && <Dashicon icon="saved" /> }
+										<span className="components-font-size-picker__dropdown-text-size" style={ { fontSize: size } }>
+											{ name }
+										</span>
+									</Button>
+								);
+							} ) }
 						</NavigableMenu>
 					) }
 				/>
@@ -90,7 +98,6 @@ function FontSizePicker( {
 					onClick={ () => onChange( undefined ) }
 					isSmall
 					isDefault
-					aria-label={ __( 'Reset font size' ) }
 				>
 					{ __( 'Reset' ) }
 				</Button>
@@ -112,4 +119,4 @@ function FontSizePicker( {
 	);
 }
 
-export default withInstanceId( FontSizePicker );
+export default FontSizePicker;