Add speak messages to the feature toggle component.

WordPress · Jan 20, 2019 · 1960f94 · 1960f94
1 parent 837fda7
commit 1960f94
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 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
@@ -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
@@ -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>
 	);
 }