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 3b811e653fac4..c2de21f3ba713 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,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 ); 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 e7b9c3dc791ad..6a3b6f62c4482 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,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> ); }