Add speak messages to the feature toggle component. (#13385)

* Add speak messages to the feature toggle component.

* Use plain props.

packages/edit-post/src/components/header/feature-toggle/index.js

@@ -1,16 +1,30 @@
+/**
+ * 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, messageActivated, messageDeactivated, speak } ) {
+	const speakMessage = () => {
+		if ( isActive ) {
+			speak( messageDeactivated || __( 'Feature deactivated' ) );
+		} else {
+			speak( messageActivated || __( 'Feature 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 +44,5 @@ export default compose( [
 			ownProps.onToggle();
 		},
 	} ) ),
+	withSpokenMessages,
 ] )( FeatureToggle );

packages/edit-post/src/components/header/writing-menu/index.js

@@ -19,17 +19,26 @@ function WritingMenu( { onClose } ) {
 				feature="fixedToolbar"
 				label={ __( 'Top Toolbar' ) }
 				info={ __( 'Access all block and document tools in a single place' ) }
-				onToggle={ onClose } />
+				onToggle={ onClose }
+				messageActivated={ __( 'Top toolbar activated' ) }
+				messageDeactivated={ __( 'Top toolbar deactivated' ) }
+			/>
 			<FeatureToggle
 				feature="focusMode"
 				label={ __( 'Spotlight Mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
-				onToggle={ onClose } />
+				onToggle={ onClose }
+				messageActivated={ __( 'Spotlight mode activated' ) }
+				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
+			/>
 			<FeatureToggle
 				feature="fullscreenMode"
 				label={ __( 'Fullscreen Mode' ) }
 				info={ __( 'Work without distraction' ) }
-				onToggle={ onClose } />
+				onToggle={ onClose }
+				messageActivated={ __( 'Fullscreen mode activated' ) }
+				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
+			/>
 		</MenuGroup>
 	);
 }