From f6084bc94baddf7d72a4b6164810d593bd42d889 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Sun, 20 Jan 2019 15:39:57 +0100
Subject: [PATCH 1/2] Add speak messages to the feature toggle component.

---
 .../components/header/feature-toggle/index.js | 28 +++++++++++++++++--
 .../components/header/writing-menu/index.js   | 21 ++++++++++++--
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js
index 3b811e653fac41..439c0dda49f493 100644
--- a/packages/edit-post/src/components/header/feature-toggle/index.js
+++ b/packages/edit-post/src/components/header/feature-toggle/index.js
@@ -1,16 +1,37 @@
+/**
+ * External dependencies
+ */
+import { flow } from 'lodash';
+
 /**
  * WordPress Dependencies
  */
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { MenuItem } from '@wordpress/components';
+import { MenuItem, withSpokenMessages } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function FeatureToggle( { onToggle, isActive, label, info, messages, speak } ) {
+	const defaultMessages = {
+		activated: __( 'Feature activated' ),
+		deactivated: __( 'Feature deactivated' ),
+	};
+
+	messages = Object.assign( defaultMessages, messages );
+
+	const speakMessage = () => {
+		if ( isActive ) {
+			speak( messages.deactivated );
+		} else {
+			speak( messages.activated );
+		}
+	};
 
-function FeatureToggle( { onToggle, isActive, label, info } ) {
 	return (
 		<MenuItem
 			icon={ isActive && 'yes' }
 			isSelected={ isActive }
-			onClick={ onToggle }
+			onClick={ flow( onToggle, speakMessage ) }
 			role="menuitemcheckbox"
 			label={ label }
 			info={ info }
@@ -30,4 +51,5 @@ export default compose( [
 			ownProps.onToggle();
 		},
 	} ) ),
+	withSpokenMessages,
 ] )( FeatureToggle );
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
index e7b9c3dc791ade..74020fc1a71ae1 100644
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -19,17 +19,32 @@ function WritingMenu( { onClose } ) {
 				feature="fixedToolbar"
 				label={ __( 'Top Toolbar' ) }
 				info={ __( 'Access all block and document tools in a single place' ) }
-				onToggle={ onClose } />
+				onToggle={ onClose }
+				messages={ {
+					activated: __( 'Top toolbar activated' ),
+					deactivated: __( 'Top toolbar deactivated' ),
+				} }
+			/>
 			<FeatureToggle
 				feature="focusMode"
 				label={ __( 'Spotlight Mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
-				onToggle={ onClose } />
+				onToggle={ onClose }
+				messages={ {
+					activated: __( 'Spotlight mode activated' ),
+					deactivated: __( 'Spotlight mode deactivated' ),
+				} }
+			/>
 			<FeatureToggle
 				feature="fullscreenMode"
 				label={ __( 'Fullscreen Mode' ) }
 				info={ __( 'Work without distraction' ) }
-				onToggle={ onClose } />
+				onToggle={ onClose }
+				messages={ {
+					activated: __( 'Fullscreen mode activated' ),
+					deactivated: __( 'Fullscreen mode deactivated' ),
+				} }
+			/>
 		</MenuGroup>
 	);
 }

From 10ce5567af8b8c6cbe070ce96a6d27fcb0d6a16f Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 23 Jan 2019 21:44:14 +0100
Subject: [PATCH 2/2] Use plain props.

---
 .../components/header/feature-toggle/index.js  | 13 +++----------
 .../components/header/writing-menu/index.js    | 18 ++++++------------
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js
index 439c0dda49f493..c2de21f3ba713e 100644
--- a/packages/edit-post/src/components/header/feature-toggle/index.js
+++ b/packages/edit-post/src/components/header/feature-toggle/index.js
@@ -11,19 +11,12 @@ import { compose } from '@wordpress/compose';
 import { MenuItem, withSpokenMessages } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function FeatureToggle( { onToggle, isActive, label, info, messages, speak } ) {
-	const defaultMessages = {
-		activated: __( 'Feature activated' ),
-		deactivated: __( 'Feature deactivated' ),
-	};
-
-	messages = Object.assign( defaultMessages, messages );
-
+function FeatureToggle( { onToggle, isActive, label, info, messageActivated, messageDeactivated, speak } ) {
 	const speakMessage = () => {
 		if ( isActive ) {
-			speak( messages.deactivated );
+			speak( messageDeactivated || __( 'Feature deactivated' ) );
 		} else {
-			speak( messages.activated );
+			speak( messageActivated || __( 'Feature activated' ) );
 		}
 	};
 
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
index 74020fc1a71ae1..6a3b6f62c44828 100644
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -20,30 +20,24 @@ function WritingMenu( { onClose } ) {
 				label={ __( 'Top Toolbar' ) }
 				info={ __( 'Access all block and document tools in a single place' ) }
 				onToggle={ onClose }
-				messages={ {
-					activated: __( 'Top toolbar activated' ),
-					deactivated: __( 'Top toolbar deactivated' ),
-				} }
+				messageActivated={ __( 'Top toolbar activated' ) }
+				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
 			<FeatureToggle
 				feature="focusMode"
 				label={ __( 'Spotlight Mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
 				onToggle={ onClose }
-				messages={ {
-					activated: __( 'Spotlight mode activated' ),
-					deactivated: __( 'Spotlight mode deactivated' ),
-				} }
+				messageActivated={ __( 'Spotlight mode activated' ) }
+				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
 			/>
 			<FeatureToggle
 				feature="fullscreenMode"
 				label={ __( 'Fullscreen Mode' ) }
 				info={ __( 'Work without distraction' ) }
 				onToggle={ onClose }
-				messages={ {
-					activated: __( 'Fullscreen mode activated' ),
-					deactivated: __( 'Fullscreen mode deactivated' ),
-				} }
+				messageActivated={ __( 'Fullscreen mode activated' ) }
+				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 			/>
 		</MenuGroup>
 	);