Load translated strings using script module data passing

lib/interactivity-api.php

@@ -31,5 +31,21 @@ function gutenberg_reregister_interactivity_script_modules() {
 		$default_version
 	);
 }
-
 add_action( 'init', 'gutenberg_reregister_interactivity_script_modules' );
+
+function gutenberg_register_interactivity_script_module_data_hooks() {
+		if ( ! has_filter( 'script_module_data_@wordpress/interactivity-router', array( wp_interactivity(), 'filter_script_module_interactivity_router_data' ) ) ) {
+			add_filter(
+				'script_module_data_@wordpress/interactivity-router',
+				function ( $data ) {
+					if ( ! isset( $data['i18n'] ) ) {
+						$data['i18n'] = array();
+					}
+					$data['i18n']['loading'] = __( 'Loading page, please wait.', 'gutenberg' );
+					$data['i18n']['loaded']  = __( 'Page Loaded.', 'gutenberg' );
+					return $data;
+				}
+			);
+		}
+}
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );

packages/interactivity-router/src/index.ts

@@ -209,16 +209,18 @@ const isValidEvent = ( event: MouseEvent ) =>
 // Variable to store the current navigation.
 let navigatingTo = '';
 
+const navigationTexts = {
+	loadedFromServer: false,
+	loading: 'Loading page, please wait.',
+	loaded: 'Page Loaded.',
+};
+
 export const { state, actions } = store( 'core/router', {
 	state: {
 		url: window.location.href,
 		navigation: {
 			hasStarted: false,
 			hasFinished: false,
-			texts: {
-				loading: '',
-				loaded: '',
-			},
 			message: '',
 		},
 	},
@@ -275,7 +277,7 @@ export const { state, actions } = store( 'core/router', {
 					navigation.hasFinished = false;
 				}
 				if ( screenReaderAnnouncement ) {
-					a11yAnnounce( navigation.texts.loading );
+					a11yAnnounce( 'loading' );
 				}
 			}, 400 );
 
@@ -315,7 +317,7 @@ export const { state, actions } = store( 'core/router', {
 				}
 
 				if ( screenReaderAnnouncement ) {
-					a11yAnnounce( navigation.texts.loaded );
+					a11yAnnounce( 'loaded' );
 				}
 
 				// Scroll to the anchor if exits in the link.
@@ -362,10 +364,33 @@ export const { state, actions } = store( 'core/router', {
  * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
  * the package on demand and should be used instead of calling `ally.speak` direacly.
  *
- * @param message  The message to be announced by assistive technologies.
- * @param ariaLive The politeness level for aria-live; default: 'polite'.
+ * @param messageKey The message to be announced by assistive technologies.
+ * @param ariaLive   The politeness level for aria-live; default: 'polite'.
  */
-function a11yAnnounce( message: string, ariaLive?: 'polite' | 'assertive' ) {
+function a11yAnnounce(
+	messageKey: 'loading' | 'loaded',
+	ariaLive?: 'polite' | 'assertive'
+) {
+	if ( ! navigationTexts.loadedFromServer ) {
+		navigationTexts.loadedFromServer = true;
+		const content = document.getElementById(
+			'wp-script-module-data-@wordpress/interactivity-router'
+		)?.textContent;
+		if ( content ) {
+			try {
+				const parsed = JSON.parse( content );
+				if ( typeof parsed?.i18n?.loading === 'string' ) {
+					navigationTexts.loading = parsed.i18n.loading;
+				}
+				if ( typeof parsed?.i18n?.loaded === 'string' ) {
+					navigationTexts.loaded = parsed.i18n.loaded;
+				}
+			} catch {}
+		}
+	}
+
+	const message = navigationTexts[ messageKey ];
+
 	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		import( '@wordpress/a11y' ).then(
 			( { speak } ) => speak( message, ariaLive ),