Add VoiceOver accessibility to contrast-checker (#14649)

* Added VoiceOver to contrast-checker

* Wrap speak in UseEffect

* import and useEffect attribute updated

* Simplify message in VoiceOver

* If condition not needed as both messages same now

* Update index.js

packages/block-editor/src/components/contrast-checker/index.js

@@ -6,8 +6,10 @@ import tinycolor from 'tinycolor2';
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 function ContrastChecker( {
 	backgroundColor,
@@ -34,6 +36,9 @@ function ContrastChecker( {
 	const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ?
 		__( 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.' ) :
 		__( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' );
+	useEffect( () => {
+		speak( __( 'This color combination may be hard for people to read.' ) );
+	}, [ backgroundColor, textColor ] );
 	return (
 		<div className="editor-contrast-checker block-editor-contrast-checker">
 			<Notice status="warning" isDismissible={ false }>