Interactivity API: Use a11y Script Module in Gutenberg

lib/interactivity-api.php

@@ -24,9 +24,41 @@ function gutenberg_reregister_interactivity_script_modules() {
  wp_register_script_module(
  '@wordpress/interactivity-router',
  gutenberg_url( '/build-module/interactivity-router/index.min.js' ),
- array( '@wordpress/interactivity' ),
+ array(
+ array(
+ 'id' => '@wordpress/a11y',
+ 'import' => 'dynamic',
+ ),
+ '@wordpress/interactivity',
+ ),
  $default_version
  );
 }
-
 add_action( 'init', 'gutenberg_reregister_interactivity_script_modules' );
+
+/**
+ * Adds script data to the interactivity-router script module.
+ *
+ * This filter is registered conditionally anticipating a WordPress Core change to add the script module data.
+ * The filter runs on 'after_setup_theme' (when Core registers Interactivity and Script Modules hooks)
+ * to ensure that the conditional registration happens after Core and correctly determine whether
+ * the filter should be added.
+ *
+ * @see https://github.com/WordPress/wordpress-develop/pull/7304
+ */
+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.', 'default' );
+ $data['i18n']['loaded'] = __( 'Page Loaded.', 'default' );
+ return $data;
+ }
+ );
+ }
+}
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );

packages/interactivity-router/package.json

@@ -28,6 +28,7 @@
  "types": "build-types",
  "wpScriptModuleExports": "./build-module/index.js",
  "dependencies": {
+ "@wordpress/a11y": "file:../a11y",
  "@wordpress/interactivity": "file:../interactivity"
  },
  "publishConfig": {

packages/interactivity-router/src/index.ts

@@ -209,16 +209,18 @@ const isValidEvent = ( event: MouseEvent ) =>
 // Variable to store the current navigation.
 let navigatingTo = '';
 
+let hasLoadedNavigationTextsData = false;
+const navigationTexts = {
+ 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 ) {
- navigation.message = navigation.texts.loading;
+ a11ySpeak( 'loading' );
  }
  }, 400 );
 
@@ -315,14 +317,7 @@ export const { state, actions } = store( 'core/router', {
  }
 
  if ( screenReaderAnnouncement ) {
- // Announce that the page has been loaded. If the message is the
- // same, we use a no-break space similar to the @wordpress/a11y
- // package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
- navigation.message =
- navigation.texts.loaded +
- ( navigation.message === navigation.texts.loaded
- ? '\u00A0'
- : '' );
+ a11ySpeak( 'loaded' );
  }
 
  // Scroll to the anchor if exits in the link.
@@ -363,6 +358,50 @@ export const { state, actions } = store( 'core/router', {
  },
 } );
 
+/**
+ * Announces a message to screen readers.
+ *
+ * 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 messageKey The message to be announced by assistive technologies.
+ */
+function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
+ if ( ! hasLoadedNavigationTextsData ) {
+ hasLoadedNavigationTextsData = 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 ),
+ // Ignore failures to load the a11y module.
+ () => {}
+ );
+ } else {
+ state.navigation.message =
+ // Announce that the page has been loaded. If the message is the
+ // same, we use a no-break space similar to the @wordpress/a11y
+ // package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
+ message + ( state.navigation.message === message ? '\u00A0' : '' );
+ }
+}
+
 // Add click and prefetch to all links.
 if ( globalThis.IS_GUTENBERG_PLUGIN ) {
  if ( navigationMode === 'fullPage' ) {

packages/interactivity-router/tsconfig.json

@@ -7,6 +7,6 @@
  "checkJs": false,
  "strict": false
  },
- "references": [ { "path": "../interactivity" } ],
+ "references": [ { "path": "../a11y" }, { "path": "../interactivity" } ],
  "include": [ "src/**/*" ]
 }