Protect notices: announce errors to screen readers

projects/plugins/protect/changelog/update-protect-notice-announce-errors

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Notices: Announce errors to screen readers.

projects/plugins/protect/package.json

@@ -32,6 +32,7 @@
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-scan": "workspace:*",
 		"@tanstack/react-query": "5.102.8",
+		"@wordpress/a11y": "4.54.0",
 		"@wordpress/api-fetch": "7.54.0",
 		"@wordpress/components": "40.0.0",
 		"@wordpress/compose": "8.7.0",

projects/plugins/protect/src/js/components/notice/README.md

@@ -5,12 +5,11 @@ A simple notice component for displaying alerts and messages to the user.
 ## Usage
 
 ```jsx
-<Notice
-    type="info"
-    message="Code is poetry."
-/>
+<Notice type="info" message="Code is poetry." />
 ```
 
 ## Props
 
-Supported `type` values are `info`, `success`, `warning`, and `error`.
+Supported `type` values are `info`, `success`, `warning`, and `error`.
+
+`spokenMessage` is the plain-text announcement for screen readers, used when `message` carries markup. Only `floating` notices are announced. `noticeId` changes on every notice, so an identical repeat announces again.

projects/plugins/protect/src/js/components/notice/index.jsx

@@ -1,3 +1,4 @@
+import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import { Notice as WPNotice } from '@wordpress/ui';
 import clsx from 'clsx';
@@ -17,6 +18,8 @@ const Notice = ( {
 	duration = null,
 	floating = false,
 	message,
+	noticeId = 0,
+	spokenMessage,
 	type = 'success',
 } ) => {
 	const { clearNotice } = useNotices();
@@ -25,6 +28,16 @@ const Notice = ( {
 		clearNotice();
 	}, [ clearNotice ] );
 
+	const spoken = spokenMessage ?? ( 'string' === typeof message ? message : null );
+
+	// Keyed on `noticeId`: effect deps compare by value, so an identical repeat would not re-fire.
+	useEffect( () => {
+		// Toast only: notices rendered inside a modal are not announced today.
+		if ( floating && 'string' === typeof spoken ) {
+			speak( spoken, 'error' === type ? 'assertive' : 'polite' );
+		}
+	}, [ noticeId, floating, spoken, type ] );
+
 	/**
 	 * Clears the notice automatically after {duration} milliseconds.
 	 */
@@ -36,7 +49,7 @@ const Notice = ( {
 		}
 
 		return () => clearTimeout( timeout );
-	}, [ clearNotice, duration, message ] );
+	}, [ clearNotice, duration, noticeId ] );
 
 	return (
 		<WPNotice.Root
@@ -46,9 +59,9 @@ const Notice = ( {
 				styles[ `notice--${ type }` ],
 				floating && styles[ 'notice--floating' ]
 			) }
-			// `Notice.Root` serializes `spokenMessage` mid-render, so a JSX message runs its
-			// hooks inside Root and corrupts hook order. Strings only, and only for the toast.
-			spokenMessage={ floating && 'string' === typeof message ? message : null }
+			// Null, not omitted: the default is the children, which `Notice.Root` serializes
+			// mid-render, corrupting hook order. Drop with the prop (WordPress/gutenberg#82737).
+			spokenMessage={ null }
 		>
 			<WPNotice.Description>{ message }</WPNotice.Description>
 			{ dismissable && (

projects/plugins/protect/src/js/data/scan/use-fixers-query.ts

@@ -144,14 +144,15 @@ export default function useFixersQuery( {
 		enabled: isRegistered,
 	} );
 
-	// Handle error if present in the query result
+	// Once per error streak, not per failed poll: each failure is a new Error object, and
+	// polling one every 5s would interrupt the screen reader with the same message each time.
 	useEffect( () => {
-		if ( fixersQuery.isError && fixersQuery.error ) {
+		if ( fixersQuery.isError ) {
 			// Reset the query data to the initial state
 			queryClient.setQueryData( [ QUERY_FIXERS_KEY ], initialData );
 			showErrorNotice( __( 'An error occurred while fetching fixers status.', 'jetpack-protect' ) );
 		}
-	}, [ fixersQuery.isError, fixersQuery.error, queryClient, showErrorNotice ] );
+	}, [ fixersQuery.isError, queryClient, showErrorNotice ] );
 
 	return fixersQuery;
 }

projects/plugins/protect/src/js/hooks/use-notices.tsx

@@ -8,6 +8,9 @@ import type { Dispatch, FC, ReactNode, SetStateAction } from 'react';
 
 interface NoticeState {
 	message?: string | JSX.Element;
+	spokenMessage?: string;
+	// Stamped by the provider on every notice, so an identical repeat still announces.
+	noticeId?: number;
 	dismissable?: boolean;
 	duration?: number;
 	type?: 'success' | 'info' | 'warning' | 'error';
@@ -18,10 +21,21 @@ interface NoticeContextValue {
 	setNotice: Dispatch< SetStateAction< NoticeState > >;
 }
 
+let lastNoticeId = 0;
+
 const NoticeContext = createContext< NoticeContextValue | undefined >( undefined );
 
 export const NoticeProvider: FC< { children: ReactNode } > = ( { children } ) => {
-	const [ notice, setNotice ] = useState< NoticeState >( null );
+	const [ notice, setNoticeState ] = useState< NoticeState >( null );
+
+	const setNotice: Dispatch< SetStateAction< NoticeState > > = useCallback( value => {
+		const noticeId = ++lastNoticeId;
+
+		setNoticeState( previous => {
+			const next = 'function' === typeof value ? value( previous ) : value;
+			return next ? { ...next, noticeId } : next;
+		} );
+	}, [] );
 
 	return (
 		<NoticeContext.Provider value={ { notice, setNotice } }>{ children }</NoticeContext.Provider>
@@ -66,27 +80,30 @@ export default function useNotices() {
 
 	const showErrorNotice = useCallback(
 		( message: string ) => {
+			const error = message || __( 'An error occurred.', 'jetpack-protect' );
+			const advice = __(
+				'Please try again or <supportLink>contact support</supportLink>.',
+				'jetpack-protect'
+			);
+
 			setNotice( {
 				type: 'error',
 				dismissable: true,
+				// The same translated string, minus the one interpolation tag it carries.
+				// Strip it by name: a generic tag strip trips CodeQL's sanitization rule.
+				spokenMessage: `${ error } ${ advice.replace( /<\/?supportLink>/g, '' ) }`,
 				message: (
 					<>
-						{ message || __( 'An error occurred.', 'jetpack-protect' ) }{ ' ' }
-						{ createInterpolateElement(
-							__(
-								'Please try again or <supportLink>contact support</supportLink>.',
-								'jetpack-protect'
+						{ error }{ ' ' }
+						{ createInterpolateElement( advice, {
+							supportLink: (
+								<Link
+									openInNewTab
+									href={ hasPlan ? PAID_PLUGIN_SUPPORT_URL : FREE_PLUGIN_SUPPORT_URL }
+									children={ null }
+								/>
 							),
-							{
-								supportLink: (
-									<Link
-										openInNewTab
-										href={ hasPlan ? PAID_PLUGIN_SUPPORT_URL : FREE_PLUGIN_SUPPORT_URL }
-										children={ null }
-									/>
-								),
-							}
-						) }
+						} ) }
 					</>
 				),
 			} );