Accessibility: Announce notices to assertive technologies

WordPress · Dec 28, 2017 · c668bb3 · c668bb3
1 parent 003d533
commit c668bb3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/editor/store/actions.js b/editor/store/actions.js
@@ -387,6 +387,7 @@ export function createNotice( status, content, options = {} ) {
 	const {
 		id = uuid(),
 		isDismissible = true,
+		spokenMessage,
 	} = options;
 	return {
 		type: 'CREATE_NOTICE',
@@ -395,6 +396,7 @@ export function createNotice( status, content, options = {} ) {
 			status,
 			content,
 			isDismissible,
+			spokenMessage,
 		},
 	};
 }

diff --git a/editor/store/effects.js b/editor/store/effects.js
@@ -17,6 +17,7 @@ import {
 	getDefaultBlockName,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -140,7 +141,7 @@ export default {
 					{ ' ' }
 					{ shouldShowLink && <a href={ post.link }>{ __( 'View post' ) }</a> }
 				</p>,
-				{ id: SAVE_POST_NOTICE_ID }
+				{ id: SAVE_POST_NOTICE_ID, spokenMessage: noticeMessage }
 			) );
 		}
 
@@ -361,17 +362,16 @@ export default {
 					updatedId: updatedReusableBlock.id,
 					id,
 				} );
-				dispatch( createSuccessNotice(
-					__( 'Block updated.' ),
-					{ id: SAVE_REUSABLE_BLOCK_NOTICE_ID }
-				) );
+				const message = __( 'Block updated.' );
+				dispatch( createSuccessNotice( message, { id: SAVE_REUSABLE_BLOCK_NOTICE_ID } ) );
 			},
 			( error ) => {
 				dispatch( { type: 'SAVE_REUSABLE_BLOCK_FAILURE', id } );
-				dispatch( createErrorNotice(
-					get( error.responseJSON, 'message', __( 'An unknown error occured.' ) ),
-					{ id: SAVE_REUSABLE_BLOCK_NOTICE_ID }
-				) );
+				const message = __( 'An unknown error occured.' );
+				dispatch( createErrorNotice( get( error.responseJSON, 'message', message ), {
+					id: SAVE_REUSABLE_BLOCK_NOTICE_ID,
+					spokenMessage: message,
+				} ) );
 			}
 		);
 	},
@@ -396,4 +396,8 @@ export default {
 	APPEND_DEFAULT_BLOCK() {
 		return insertBlock( createBlock( getDefaultBlockName() ) );
 	},
+	CREATE_NOTICE( { notice: { content, spokenMessage } } ) {
+		const message = spokenMessage || content;
+		speak( message, 'assertive' );
+	},
 };
diff --git a/editor/store/test/effects.js b/editor/store/test/effects.js
@@ -346,6 +346,7 @@ describe( 'effects', () => {
 					id: 'SAVE_POST_NOTICE_ID',
 					isDismissible: true,
 					status: 'success',
+					spokenMessage: 'Post published!',
 				},
 				type: 'CREATE_NOTICE',
 			} ) );
@@ -371,6 +372,7 @@ describe( 'effects', () => {
 					id: 'SAVE_POST_NOTICE_ID',
 					isDismissible: true,
 					status: 'success',
+					spokenMessage: 'Post reverted to draft.',
 				},
 				type: 'CREATE_NOTICE',
 			} ) );
@@ -392,6 +394,7 @@ describe( 'effects', () => {
 					id: 'SAVE_POST_NOTICE_ID',
 					isDismissible: true,
 					status: 'success',
+					spokenMessage: 'Post updated!',
 				},
 				type: 'CREATE_NOTICE',
 			} ) );