Update individual control labels to fully describe control for a11y

Address concerns raised in #16790
WordPress · Sep 17, 2019 · f8ff627 · f8ff627
1 parent 619ef71
commit f8ff627
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 24 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -360,6 +360,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+<a name="ResponsiveBlockControlLabel" href="#ResponsiveBlockControlLabel">#</a> **ResponsiveBlockControlLabel**
+
+Undocumented declaration.
+
 <a name="RichText" href="#RichText">#</a> **RichText**
 
 _Related_

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -25,7 +25,7 @@ export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadCheck } from './media-upload/check';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as PlainText } from './plain-text';
-export { default as ResponsiveBlockControl } from './responsive-block-control';
+export { default as ResponsiveBlockControl, ResponsiveBlockControlLabel } from './responsive-block-control';
 export {
 	default as RichText,
 	RichTextShortcut,

diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -8,10 +8,26 @@ import { noop } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 
+import { Fragment } from '@wordpress/element';
+
 import {
 	ToggleControl,
 } from '@wordpress/components';
 
+export function ResponsiveBlockControlLabel( { property, device } ) {
+	return (
+		<Fragment>
+			<span className="screen-reader-text">
+				{ property } for
+			</span>
+			{ device }
+			<span className="screen-reader-text">
+			devices
+			</span>
+		</Fragment>
+	);
+}
+
 function ResponsiveBlockControl( props ) {
 	const { legend, property, toggleLabel, isOpen = false, onToggle = noop, renderDefaultControl, defaultLabel = __( 'All' ), devices = [ __( 'Desktop' ), __( 'Tablet' ), __( 'Mobile' ) ], renderResponsiveControls } = props;
 
@@ -21,19 +37,13 @@ function ResponsiveBlockControl( props ) {
 
 	const toggleControlLabel = toggleLabel || sprintf( __( 'Use the same %s on all screensizes.' ), property );
 
-	const defaultControl = (
-		<fieldset>
-			<legend>{ defaultLabel }</legend>
-			{ renderDefaultControl( defaultLabel ) }
-		</fieldset>
-	);
+	const defaultControl = renderDefaultControl( defaultLabel );
 
-	const defaultResponsiveControls = devices.map( ( deviceLabel ) => {
+	const defaultResponsiveControls = devices.map( ( deviceLabel, index ) => {
 		return (
-			<fieldset key={ deviceLabel }>
-				<legend>{ deviceLabel }</legend>
+			<Fragment key={ index }>
 				{ renderDefaultControl( deviceLabel ) }
-			</fieldset>
+			</Fragment>
 		);
 	} );
 
@@ -55,7 +65,6 @@ function ResponsiveBlockControl( props ) {
 
 			</div>
 		</fieldset>
-
 	);
 }
 

diff --git a/...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__legend\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg class=\\"components-form-toggle__on\\" width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div></div><fieldset><legend>All</legend><input value=\\"All\\"></fieldset></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__legend\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg class=\\"components-form-toggle__on\\" width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div></div><label>All</label><input value=\\"All\\"></div></fieldset>"`;
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -3,6 +3,12 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act } from 'react-dom/test-utils';
+import { uniqueId } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +29,8 @@ afterEach( () => {
 	container = null;
 } );
 
+const inputId = uniqueId();
+
 describe( 'Basic rendering', () => {
 	it( 'should render with required props', () => {
 		act( () => {
@@ -31,17 +39,21 @@ describe( 'Basic rendering', () => {
 					legend="Padding"
 					property="padding"
 					renderDefaultControl={ ( label ) => (
-						<input
-							defaultValue={ label }
-						/>
+						<Fragment>
+							<label htmlFor={ inputId }>{ label }</label>
+							<input
+								id={ inputId }
+								defaultValue={ label }
+							/>
+						</Fragment>
 					) }
 				/>, container
 			);
 		} );
 
 		const activePropertyLabel = Array.from( container.querySelectorAll( 'legend' ) ).filter( ( legend ) => legend.innerHTML === 'Padding' );
 
-		const activeDeviceLabel = Array.from( container.querySelectorAll( 'legend' ) ).filter( ( legend ) => legend.innerHTML === 'All' );
+		const activeDeviceLabel = Array.from( container.querySelectorAll( 'label' ) ).filter( ( label ) => label.innerText === 'Padding for desktop devices' );
 
 		const defaultControl = container.querySelector( 'input[value="All"]' );
 
@@ -65,9 +77,13 @@ describe( 'Basic rendering', () => {
 				<ResponsiveBlockControl
 					property="padding"
 					renderDefaultControl={ ( label ) => (
-						<input
-							defaultValue={ label }
-						/>
+						<Fragment>
+							<label htmlFor={ inputId }>{ label }</label>
+							<input
+								id={ inputId }
+								defaultValue={ label }
+							/>
+						</Fragment>
 					) }
 				/>, container
 			);
@@ -82,9 +98,14 @@ describe( 'Basic rendering', () => {
 				<ResponsiveBlockControl
 					legend="Padding"
 					renderDefaultControl={ ( label ) => (
-						<input
-							defaultValue={ label }
-						/>
+
+						<Fragment>
+							<label htmlFor={ inputId }>{ label }</label>
+							<input
+								id={ inputId }
+								defaultValue={ label }
+							/>
+						</Fragment>
 					) }
 				/>, container
 			);

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -15,6 +15,7 @@ import {
 	PanelColorSettings,
 	withColors,
 	ResponsiveBlockControl,
+	ResponsiveBlockControlLabel,
 } from '@wordpress/block-editor';
 
 import {
@@ -80,7 +81,7 @@ function GroupEdit( {
 						} }
 						renderDefaultControl={ ( label ) => (
 							<SelectControl
-								label={ label }
+								label={ <ResponsiveBlockControlLabel property="Padding" device={ label } /> }
 								hideLabelFromVision={ false }
 								options={ sizeOptions }
 							/>