Add label elements to scheduler and visibility (#3317)

* Change span to label elements. * Extract withAPIData function from export * Restore destroyed line
WordPress · Nov 6, 2017 · 9c011c6 · 9c011c6
1 parent 7bfdee7
commit 9c011c6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/editor/sidebar/post-schedule/index.js b/editor/sidebar/post-schedule/index.js
@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import { flowRight } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelRow, Dropdown, withAPIData } from '@wordpress/components';
+import { PanelRow, Dropdown, withAPIData, withInstanceId } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,19 +16,21 @@ import './style.scss';
 import PostScheduleLabel from '../../post-schedule/label';
 import PostScheduleForm from '../../post-schedule';
 
-export function PostSchedule( { user } ) {
+export function PostSchedule( { user, instanceId } ) {
 	if ( ! user.data || ! user.data.capabilities.publish_posts ) {
 		return null;
 	}
+	const postScheduleSelectorId = 'post-schedule-selector-' + instanceId;
 
 	return (
 		<PanelRow className="editor-post-schedule">
-			<span>{ __( 'Publish' ) }</span>
+			<label htmlFor={ postScheduleSelectorId }>{ __( 'Publish' ) }</label>
 			<Dropdown
 				position="bottom left"
 				contentClassName="editor-post-schedule__dialog"
 				renderToggle={ ( { onToggle, isOpen } ) => (
 					<button
+						id={ postScheduleSelectorId }
 						type="button"
 						className="editor-post-schedule__toggle button-link"
 						onClick={ onToggle }
@@ -38,8 +45,11 @@ export function PostSchedule( { user } ) {
 	);
 }
 
-export default withAPIData( () => {
-	return {
-		user: '/wp/v2/users/me?context=edit',
-	};
-} )( PostSchedule );
+const applyWithAPIData = withAPIData( () => ( {
+	user: '/wp/v2/users/me?context=edit',
+} ) );
+
+export default flowRight( [
+	applyWithAPIData,
+	withInstanceId,
+] )( PostSchedule );
diff --git a/editor/sidebar/post-visibility/index.js b/editor/sidebar/post-visibility/index.js
@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import { flowRight } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelRow, Dropdown, withAPIData } from '@wordpress/components';
+import { PanelRow, Dropdown, withAPIData, withInstanceId } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -11,19 +16,21 @@ import './style.scss';
 import PostVisibilityLabel from '../../post-visibility/label';
 import PostVisibilityForm from '../../post-visibility';
 
-export function PostVisibility( { user } ) {
+export function PostVisibility( { user, instanceId } ) {
 	const canEdit = user.data && user.data.capabilities.publish_posts;
+	const postVisibilitySelectorId = 'post-visibility-selector-' + instanceId;
 
 	return (
 		<PanelRow className="editor-post-visibility">
-			<span>{ __( 'Visibility' ) }</span>
+			<label htmlFor={ postVisibilitySelectorId }>{ __( 'Visibility' ) }</label>
 			{ ! canEdit && <span><PostVisibilityLabel /></span> }
 			{ canEdit && (
 				<Dropdown
 					position="bottom left"
 					contentClassName="editor-post-visibility__dialog"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
+							id={ postVisibilitySelectorId }
 							type="button"
 							aria-expanded={ isOpen }
 							className="editor-post-visibility__toggle button-link"
@@ -39,8 +46,11 @@ export function PostVisibility( { user } ) {
 	);
 }
 
-export default withAPIData( () => {
-	return {
-		user: '/wp/v2/users/me?context=edit',
-	};
-} )( PostVisibility );
+const applyWithAPIData = withAPIData( () => ( {
+	user: '/wp/v2/users/me?context=edit',
+} ) );
+
+export default flowRight( [
+	applyWithAPIData,
+	withInstanceId,
+] )( PostVisibility );