diff --git a/packages/components/src/higher-order/with-spoken-messages/index.js b/packages/components/src/higher-order/with-spoken-messages/index.js
index de17dc62aeb575..dadd7899d5a07b 100644
--- a/packages/components/src/higher-order/with-spoken-messages/index.js
+++ b/packages/components/src/higher-order/with-spoken-messages/index.js
@@ -11,8 +11,8 @@ import { speak } from '@wordpress/a11y';
import { createHigherOrderComponent } from '@wordpress/compose';
/**
- * A Higher Order Component used to be provide a unique instance ID by
- * component.
+ * A Higher Order Component used to be provide audible messages to assistive
+ * technologies using ARIA live regions.
*
* @param {WPElement} WrappedComponent The wrapped component.
*
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
index 7028b0b542b51d..812c13fe504035 100644
--- a/packages/components/src/notice/index.js
+++ b/packages/components/src/notice/index.js
@@ -8,20 +8,33 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
+import withSpokenMessages from '../higher-order/with-spoken-messages';
/**
* Internal dependencies
*/
import IconButton from '../icon-button';
-function Notice( { className, status, children, onRemove = noop, isDismissible = true } ) {
+function Notice( {
+ className,
+ status,
+ children,
+ onRemove = noop,
+ isDismissible = true,
+ spokenMessage,
+ speak,
+} ) {
const classNames = classnames( className, 'components-notice', {
[ `is-${ status }` ]: ! ! status,
}, {
'is-dismissible': isDismissible,
} );
+
+ const message = spokenMessage || children;
+ speak( message, 'assertive' );
+
return (
-
+
{ children }
{ isDismissible && (
-
-
-
+
`;
diff --git a/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap b/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
index c1153e4d36310a..374033ea180676 100644
--- a/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
@@ -8,22 +8,29 @@ exports[`ContrastChecker should render component when the colors do not meet AA
isLargeText={true}
textColor="#666"
>
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
+
+
`;
@@ -35,22 +42,29 @@ exports[`ContrastChecker should render different message matching snapshot when
isLargeText={false}
textColor="#666"
>
-
-
- 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 darker background color and/or a brighter text color.
+
-
-
+
+
`;
@@ -59,22 +73,29 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
fallbackBackgroundColor="#000000"
textColor="#000000"
>
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
+
+
`;
@@ -84,22 +105,29 @@ exports[`ContrastChecker should take into consideration the font size passed 1`]
fontSize={17}
textColor="#000000"
>
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
+
+
`;
@@ -109,22 +137,29 @@ exports[`ContrastChecker should take into consideration wherever text is large o
isLargeText={false}
textColor="#000000"
>
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
+
+
`;
@@ -135,21 +170,28 @@ exports[`ContrastChecker should use isLargeText to make decisions if both isLarg
isLargeText={false}
textColor="#000000"
>
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
+
+
`;
diff --git a/packages/editor/src/components/template-validation-notice/index.js b/packages/editor/src/components/template-validation-notice/index.js
index f8ada453dc3f46..2b2d05e32867f9 100644
--- a/packages/editor/src/components/template-validation-notice/index.js
+++ b/packages/editor/src/components/template-validation-notice/index.js
@@ -18,9 +18,16 @@ function TemplateValidationNotice( { isValid, ...props } ) {
}
};
+ const message = __( 'The content of your post doesn’t match the template assigned to your post type.' );
+
return (
-
-
{ __( 'The content of your post doesn’t match the template assigned to your post type.' ) }