Use a11y speak instead of role alert.

WordPress · Aug 30, 2018 · 488c121 · 488c121
1 parent c2a9c0f
commit 488c121
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 69 deletions.
diff --git 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
@@ -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 (
-		<div className={ classNames } role="alert">
+		<div className={ classNames }>
 			<div className="components-notice__content">{ children }</div>
 			{ isDismissible && (
 				<IconButton
@@ -35,4 +48,4 @@ function Notice( { className, status, children, onRemove = noop, isDismissible =
 	);
 }
 
-export default Notice;
+export default withSpokenMessages( Notice );
diff --git a/packages/components/src/notice/test/__snapshots__/index.js.snap b/packages/components/src/notice/test/__snapshots__/index.js.snap
@@ -1,18 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Notice should match snapshot 1`] = `
-<div
-  className="components-notice is-example is-dismissible"
-  role="alert"
->
-  <div
-    className="components-notice__content"
-  />
-  <IconButton
-    className="components-notice__dismiss"
-    icon="no"
-    label="Dismiss this notice"
-    onClick={[Function]}
-  />
-</div>
+<Notice
+  debouncedSpeak={[Function]}
+  speak={[Function]}
+  status="example"
+/>
 `;
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
@@ -8,22 +8,29 @@ exports[`ContrastChecker should render component when the colors do not meet AA
   isLargeText={true}
   textColor="#666"
 >
-  <Notice
+  <WithSpokenMessages(Notice)
     className="editor-contrast-checker"
     isDismissible={false}
     status="warning"
   >
-    <div
-      className="editor-contrast-checker components-notice is-warning"
-      role="alert"
+    <Notice
+      className="editor-contrast-checker"
+      debouncedSpeak={[Function]}
+      isDismissible={false}
+      speak={[Function]}
+      status="warning"
     >
       <div
-        className="components-notice__content"
+        className="editor-contrast-checker components-notice is-warning"
       >
-        This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        <div
+          className="components-notice__content"
+        >
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </div>
       </div>
-    </div>
-  </Notice>
+    </Notice>
+  </WithSpokenMessages(Notice)>
 </ContrastChecker>
 `;
 
@@ -35,22 +42,29 @@ exports[`ContrastChecker should render different message matching snapshot when
   isLargeText={false}
   textColor="#666"
 >
-  <Notice
+  <WithSpokenMessages(Notice)
     className="editor-contrast-checker"
     isDismissible={false}
     status="warning"
   >
-    <div
-      className="editor-contrast-checker components-notice is-warning"
-      role="alert"
+    <Notice
+      className="editor-contrast-checker"
+      debouncedSpeak={[Function]}
+      isDismissible={false}
+      speak={[Function]}
+      status="warning"
     >
       <div
-        className="components-notice__content"
+        className="editor-contrast-checker components-notice is-warning"
       >
-        This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.
+        <div
+          className="components-notice__content"
+        >
+          This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.
+        </div>
       </div>
-    </div>
-  </Notice>
+    </Notice>
+  </WithSpokenMessages(Notice)>
 </ContrastChecker>
 `;
 
@@ -59,22 +73,29 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
   fallbackBackgroundColor="#000000"
   textColor="#000000"
 >
-  <Notice
+  <WithSpokenMessages(Notice)
     className="editor-contrast-checker"
     isDismissible={false}
     status="warning"
   >
-    <div
-      className="editor-contrast-checker components-notice is-warning"
-      role="alert"
+    <Notice
+      className="editor-contrast-checker"
+      debouncedSpeak={[Function]}
+      isDismissible={false}
+      speak={[Function]}
+      status="warning"
     >
       <div
-        className="components-notice__content"
+        className="editor-contrast-checker components-notice is-warning"
       >
-        This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        <div
+          className="components-notice__content"
+        >
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </div>
       </div>
-    </div>
-  </Notice>
+    </Notice>
+  </WithSpokenMessages(Notice)>
 </ContrastChecker>
 `;
 
@@ -84,22 +105,29 @@ exports[`ContrastChecker should take into consideration the font size passed 1`]
   fontSize={17}
   textColor="#000000"
 >
-  <Notice
+  <WithSpokenMessages(Notice)
     className="editor-contrast-checker"
     isDismissible={false}
     status="warning"
   >
-    <div
-      className="editor-contrast-checker components-notice is-warning"
-      role="alert"
+    <Notice
+      className="editor-contrast-checker"
+      debouncedSpeak={[Function]}
+      isDismissible={false}
+      speak={[Function]}
+      status="warning"
     >
       <div
-        className="components-notice__content"
+        className="editor-contrast-checker components-notice is-warning"
       >
-        This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        <div
+          className="components-notice__content"
+        >
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </div>
       </div>
-    </div>
-  </Notice>
+    </Notice>
+  </WithSpokenMessages(Notice)>
 </ContrastChecker>
 `;
 
@@ -109,22 +137,29 @@ exports[`ContrastChecker should take into consideration wherever text is large o
   isLargeText={false}
   textColor="#000000"
 >
-  <Notice
+  <WithSpokenMessages(Notice)
     className="editor-contrast-checker"
     isDismissible={false}
     status="warning"
   >
-    <div
-      className="editor-contrast-checker components-notice is-warning"
-      role="alert"
+    <Notice
+      className="editor-contrast-checker"
+      debouncedSpeak={[Function]}
+      isDismissible={false}
+      speak={[Function]}
+      status="warning"
     >
       <div
-        className="components-notice__content"
+        className="editor-contrast-checker components-notice is-warning"
       >
-        This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        <div
+          className="components-notice__content"
+        >
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </div>
       </div>
-    </div>
-  </Notice>
+    </Notice>
+  </WithSpokenMessages(Notice)>
 </ContrastChecker>
 `;
 
@@ -135,21 +170,28 @@ exports[`ContrastChecker should use isLargeText to make decisions if both isLarg
   isLargeText={false}
   textColor="#000000"
 >
-  <Notice
+  <WithSpokenMessages(Notice)
     className="editor-contrast-checker"
     isDismissible={false}
     status="warning"
   >
-    <div
-      className="editor-contrast-checker components-notice is-warning"
-      role="alert"
+    <Notice
+      className="editor-contrast-checker"
+      debouncedSpeak={[Function]}
+      isDismissible={false}
+      speak={[Function]}
+      status="warning"
     >
       <div
-        className="components-notice__content"
+        className="editor-contrast-checker components-notice is-warning"
       >
-        This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        <div
+          className="components-notice__content"
+        >
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </div>
       </div>
-    </div>
-  </Notice>
+    </Notice>
+  </WithSpokenMessages(Notice)>
 </ContrastChecker>
 `;
diff --git 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 (
-		<Notice className="editor-template-validation-notice" isDismissible={ false } status="warning">
-			<p>{ __( 'The content of your post doesn’t match the template assigned to your post type.' ) }</p>
+		<Notice
+			className="editor-template-validation-notice"
+			isDismissible={ false }
+			status="warning"
+			spokenMessage={ message }
+		>
+			<p>{ message }</p>
 			<div>
 				<Button isDefault onClick={ props.resetTemplateValidity }>{ __( 'Keep it as is' ) }</Button>
 				<Button onClick={ confirmSynchronization } isPrimary>{ __( 'Reset the template' ) }</Button>