Improved accessibility of PanelColor. (#6428)

PanelColor displayed the color in a visual way as a square with the color, but for users with accessibility needs, we should also provide that information in a textual/descriptive way.
WordPress · Apr 30, 2018 · 424dab7 · 424dab7
1 parent 3e36770
commit 424dab7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/blocks/colors/with-colors.js b/blocks/colors/with-colors.js
@@ -33,6 +33,7 @@ export default createHigherOrderComponent(
 						props.attributes[ colorAttribute ],
 						props.attributes[ customColorAttribute ]
 					),
+					name: props.attributes[ colorAttribute ],
 					class: getColorClass( colorContext, props.attributes[ colorAttribute ] ),
 					set: setColorValue( colors, colorAttribute, customColorAttribute, props.setAttributes ),
 				} ),

diff --git a/components/panel/color.js b/components/panel/color.js
@@ -1,16 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PanelBody from './body';
 
-function PanelColor( { colorValue, title, ...props } ) {
+function PanelColor( { colorValue, colorName, title, ...props } ) {
+	// translators: %s: The name of the color e.g: "vivid red" or color hex code if name is not available e.g: "#f00".
+	const currentColorLabel = sprintf( __( '(current color: %s)' ), colorName || colorValue );
 	return (
 		<PanelBody
 			{ ...props }
 			title={ [
 				<span className="components-panel__color-title" key="title">{ title }</span>,
-				colorValue && <span className="components-panel__color-area" key="color" style={ { background: colorValue } } />,
+				colorValue && (
+					<span className="components-panel__color-area" aria-label={ currentColorLabel } key="color" style={ { background: colorValue } } />
+				),
 			] }
 		/>
 	);

diff --git a/components/panel/test/color.js b/components/panel/test/color.js
@@ -19,7 +19,15 @@ describe( 'PanelColor', () => {
 		const wrapper = shallow( <PanelColor colorValue="red" title="sample title" /> );
 
 		expect( wrapper.prop( 'title' ) ).toContainEqual(
-			<span className="components-panel__color-area" key="color" style={ { background: 'red' } } />
+			<span className="components-panel__color-area" aria-label="(current color: red)" key="color" style={ { background: 'red' } } />
+		);
+	} );
+
+	it( 'should use color name in area label if provided', () => {
+		const wrapper = shallow( <PanelColor colorValue="#f00" colorName="red" title="sample title" /> );
+
+		expect( wrapper.prop( 'title' ) ).toContainEqual(
+			<span className="components-panel__color-area" aria-label="(current color: red)" key="color" style={ { background: '#f00' } } />
 		);
 	} );
 } );
diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
@@ -213,13 +213,13 @@ class ParagraphBlock extends Component {
 							help={ this.getDropCapHelp }
 						/>
 					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor.value } initialOpen={ false }>
+					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor.value } colorName={ backgroundColor.name } initialOpen={ false }>
 						<ColorPalette
 							value={ backgroundColor.value }
 							onChange={ backgroundColor.set }
 						/>
 					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor.value } initialOpen={ false }>
+					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor.value } colorName={ textColor.name } initialOpen={ false }>
 						<ColorPalette
 							value={ textColor.value }
 							onChange={ textColor.set }