From 9c011c6ae214611f5aafeafdf73cfea838590aa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Wrede?= <soerenwrede@gmail.com>
Date: Mon, 6 Nov 2017 22:12:16 +0100
Subject: [PATCH] Add label elements to scheduler and visibility (#3317)

* Change span to label elements.

* Extract withAPIData function from export

* Restore destroyed line
---
 editor/sidebar/post-schedule/index.js   | 26 +++++++++++++++++--------
 editor/sidebar/post-visibility/index.js | 26 +++++++++++++++++--------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/editor/sidebar/post-schedule/index.js b/editor/sidebar/post-schedule/index.js
index 317184bbef4abf..ef35b175764e23 100644
--- 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
index cb21c996354b45..35b4eaa322083d 100644
--- 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,12 +16,13 @@ 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
@@ -24,6 +30,7 @@ export function PostVisibility( { user } ) {
 					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 );