Interpolate aria label text based on label name

WordPress · Jul 20, 2018 · 4c92b62 · 4c92b62
1 parent 2ac93a3
commit 4c92b62
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/core-blocks/button/edit.js b/core-blocks/button/edit.js
@@ -121,7 +121,6 @@ class ButtonEdit extends Component {
 									value: backgroundColor.value,
 									onChange: setBackgroundColor,
 									label: __( 'Background Color' ),
-									// translators: %s: The name of the color e.g: "vivid red" or color hex code if name is not available e.g: "#f00".
 									colorIndicatorAriaLabel: __( '(current background color: %s)' ),
 								},
 								{

diff --git a/editor/components/color-palette/control.js b/editor/components/color-palette/control.js
@@ -3,7 +3,7 @@
  */
 import { BaseControl, ColorIndicator } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
-import { sprintf } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,12 +13,12 @@ import ColorPalette from './';
 import withColorContext from './with-color-context';
 import { getColorName } from '../colors';
 
-const ColorPaletteControl = withColorContext( ( { label, value, onChange, colorIndicatorAriaLabel, colors } ) => {
-	let ariaLabel;
-	if ( colorIndicatorAriaLabel ) {
-		const colorName = getColorName( colors, value );
-		ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-	}
+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );
+
+const ColorPaletteControl = withColorContext( ( { label, value, onChange, colors } ) => {
+	const colorName = getColorName( colors, value );
+	const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
 
 	const labelElement = (
 		<Fragment>

diff --git a/editor/components/panel-color-settings/index.js b/editor/components/panel-color-settings/index.js
@@ -8,7 +8,7 @@ import { omit } from 'lodash';
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { ifCondition, compose } from '@wordpress/compose';
-import { sprintf } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -18,17 +18,17 @@ import ColorPaletteControl from '../color-palette/control';
 import withColorContext from '../color-palette/with-color-context';
 import { getColorName } from '../colors';
 
+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );
+
 const renderColorIndicators = ( colorSettings, colors ) => {
-	return colorSettings.map( ( { value, colorIndicatorAriaLabel }, index ) => {
+	return colorSettings.map( ( { value, label }, index ) => {
 		if ( ! value ) {
 			return null;
 		}
 
-		let ariaLabel;
-		if ( colorIndicatorAriaLabel ) {
-			const colorName = getColorName( colors, value );
-			ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-		}
+		const colorName = getColorName( colors, value );
+		const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
 
 		return (
 			<ColorIndicator