Interpolate aria label text based on label name

WordPress · Jul 24, 2018 · 2874f0f · 2874f0f
1 parent b2fabf4
commit 2874f0f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 32 deletions.
diff --git a/core-blocks/button/edit.js b/core-blocks/button/edit.js
@@ -110,15 +110,11 @@ 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)' ),
 								},
 								{
 									value: textColor.value,
 									onChange: setTextColor,
 									label: __( 'Text 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 text color: %s)' ),
 								},
 							] }
 						>

diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
@@ -243,15 +243,11 @@ class ParagraphBlock 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)' ),
 							},
 							{
 								value: textColor.value,
 								onChange: setTextColor,
 								label: __( 'Text 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 text 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 = __( '(%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

diff --git a/editor/components/panel-color-settings/test/__snapshots__/index.js.snap b/editor/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -9,27 +9,25 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
     >
       Test Title
       <ColorIndicator
-        aria-label="black"
+        aria-label="(border color: #000)"
         colorValue="#000"
       />
       <ColorIndicator
-        aria-label="nearly black"
+        aria-label="(background color: #111)"
         colorValue="#111"
       />
     </span>
   }
 >
   <WithColorContext(Component)
-    colorIndicatorAriaLabel="black"
     key="0"
-    label="black color"
+    label="border color"
     onChange={[Function]}
     value="#000"
   />
   <WithColorContext(Component)
-    colorIndicatorAriaLabel="nearly black"
     key="1"
-    label="nearly black color"
+    label="background color"
     onChange={[Function]}
     value="#111"
   />

diff --git a/editor/components/panel-color-settings/test/index.js b/editor/components/panel-color-settings/test/index.js
@@ -19,14 +19,12 @@ describe( 'PanelColorSettings', () => {
 					{
 						value: '#000',
 						onChange: noop,
-						colorIndicatorAriaLabel: 'black',
-						label: 'black color',
+						label: 'border color',
 					},
 					{
 						value: '#111',
 						onChange: noop,
-						colorIndicatorAriaLabel: 'nearly black',
-						label: 'nearly black color',
+						label: 'background color',
 					},
 				] }
 			/>