From 29999f82d67d082fc8a69117a211e55594817721 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Fri, 6 Sep 2024 13:46:34 +0200 Subject: [PATCH 01/16] Use @wordpress/a11y to announce to screen readers --- packages/interactivity-router/package.json | 1 + packages/interactivity-router/src/index.ts | 28 ++++++++++++++------- packages/interactivity-router/tsconfig.json | 2 +- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json index db85c0d8bdba3b..7282ee0b00f9c9 100644 --- a/packages/interactivity-router/package.json +++ b/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": { diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index c6e1087b038a55..6c891ef159344d 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -275,7 +275,7 @@ export const { state, actions } = store( 'core/router', { navigation.hasFinished = false; } if ( screenReaderAnnouncement ) { - navigation.message = navigation.texts.loading; + a11yAnnounce( navigation.texts.loading ); } }, 400 ); @@ -315,14 +315,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' - : '' ); + a11yAnnounce( navigation.texts.loaded ); } // Scroll to the anchor if exits in the link. @@ -363,6 +356,23 @@ 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 message 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' ) { + import( '@wordpress/a11y' ).then( + ( { speak } ) => speak( message, ariaLive ), + // Silence errors. + () => undefined + ); +} + // Add click and prefetch to all links. if ( globalThis.IS_GUTENBERG_PLUGIN ) { if ( navigationMode === 'fullPage' ) { diff --git a/packages/interactivity-router/tsconfig.json b/packages/interactivity-router/tsconfig.json index eff80af2f28db3..f601a26a86f5f4 100644 --- a/packages/interactivity-router/tsconfig.json +++ b/packages/interactivity-router/tsconfig.json @@ -7,6 +7,6 @@ "checkJs": false, "strict": false }, - "references": [ { "path": "../interactivity" } ], + "references": [ { "path": "../a11y" }, { "path": "../interactivity" } ], "include": [ "src/**/*" ] } From 2d5317d2d18b796539420b121cd5c5a387413ef2 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Fri, 6 Sep 2024 13:51:15 +0200 Subject: [PATCH 02/16] Only use a11y module in GUTENBERG_PLUGIN --- packages/interactivity-router/src/index.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 6c891ef159344d..5574ee925b1dfe 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -366,11 +366,19 @@ export const { state, actions } = store( 'core/router', { * @param ariaLive The politeness level for aria-live; default: 'polite'. */ function a11yAnnounce( message: string, ariaLive?: 'polite' | 'assertive' ) { - import( '@wordpress/a11y' ).then( - ( { speak } ) => speak( message, ariaLive ), - // Silence errors. - () => undefined - ); + if ( globalThis.IS_GUTENBERG_PLUGIN ) { + import( '@wordpress/a11y' ).then( + ( { speak } ) => speak( message, ariaLive ), + // Silence errors. + () => undefined + ); + } 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. From 84096121416b4122c0fa69283ff465826edeea26 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Fri, 6 Sep 2024 14:28:43 +0200 Subject: [PATCH 03/16] Add interacitivty-router script dependency on a11y --- lib/interactivity-api.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php index 90535f1ebaa42f..c1a835e3547c7b 100644 --- a/lib/interactivity-api.php +++ b/lib/interactivity-api.php @@ -24,7 +24,10 @@ 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 ); } From 3afbd5196c4fcc62a3e8e5dba45675e0ab799e78 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Fri, 6 Sep 2024 18:17:04 +0200 Subject: [PATCH 04/16] Load translated strings using script module data passing --- lib/interactivity-api.php | 18 ++++++++- packages/interactivity-router/src/index.ts | 43 +++++++++++++++++----- 2 files changed, 51 insertions(+), 10 deletions(-) diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php index c1a835e3547c7b..c35e9516b1111d 100644 --- a/lib/interactivity-api.php +++ b/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 ); diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 5574ee925b1dfe..f9bd401daae775 100644 --- a/packages/interactivity-router/src/index.ts +++ b/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 ), From 771e61c6e2cbaf49ff54b937c411dd2e14289469 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 12 Sep 2024 13:20:37 +0200 Subject: [PATCH 05/16] Fix i18n domain to use Core translations. --- lib/interactivity-api.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php index c35e9516b1111d..443a3ea31fb499 100644 --- a/lib/interactivity-api.php +++ b/lib/interactivity-api.php @@ -41,8 +41,8 @@ function ( $data ) { if ( ! isset( $data['i18n'] ) ) { $data['i18n'] = array(); } - $data['i18n']['loading'] = __( 'Loading page, please wait.', 'gutenberg' ); - $data['i18n']['loaded'] = __( 'Page Loaded.', 'gutenberg' ); + $data['i18n']['loading'] = __( 'Loading page, please wait.', 'default' ); + $data['i18n']['loaded'] = __( 'Page Loaded.', 'default' ); return $data; } ); From 1019f5b934e4fcfa679f884c8b65c1a3587d4b9d Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 12 Sep 2024 13:25:53 +0200 Subject: [PATCH 06/16] Add extra fallback in case a11y module does not load --- packages/interactivity-router/src/index.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index f9bd401daae775..79a974e65dc285 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -394,8 +394,16 @@ function a11yAnnounce( if ( globalThis.IS_GUTENBERG_PLUGIN ) { import( '@wordpress/a11y' ).then( ( { speak } ) => speak( message, ariaLive ), - // Silence errors. - () => undefined + // Use the fallback Interactivity API implementation if the a11y + // Script Module cannot be loaded. + () => { + 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' : '' ); + } ); } else { state.navigation.message = From adbfd46eed5aae2a518c2e7470b9cbaf872a70bc Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 12 Sep 2024 13:34:44 +0200 Subject: [PATCH 07/16] Fix lints --- lib/interactivity-api.php | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php index 443a3ea31fb499..90037c89cc5967 100644 --- a/lib/interactivity-api.php +++ b/lib/interactivity-api.php @@ -25,7 +25,10 @@ function gutenberg_reregister_interactivity_script_modules() { '@wordpress/interactivity-router', gutenberg_url( '/build-module/interactivity-router/index.min.js' ), array( - array( 'id' => '@wordpress/a11y', 'import' => 'dynamic' ), + array( + 'id' => '@wordpress/a11y', + 'import' => 'dynamic', + ), '@wordpress/interactivity', ), $default_version @@ -34,18 +37,18 @@ function gutenberg_reregister_interactivity_script_modules() { 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.', 'default' ); - $data['i18n']['loaded'] = __( 'Page Loaded.', 'default' ); - return $data; + 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 ); From 85a7d02f34c6f1adf32e710b4ddf34717b86d9d2 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 12 Sep 2024 14:07:21 +0200 Subject: [PATCH 08/16] Remove extra fallback --- packages/interactivity-router/src/index.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 79a974e65dc285..eefbb8758e7ef0 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -394,16 +394,8 @@ function a11yAnnounce( if ( globalThis.IS_GUTENBERG_PLUGIN ) { import( '@wordpress/a11y' ).then( ( { speak } ) => speak( message, ariaLive ), - // Use the fallback Interactivity API implementation if the a11y - // Script Module cannot be loaded. - () => { - 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' : '' ); - } + // Ignore failures to load the a11y module. + () => {} ); } else { state.navigation.message = From 6a21c9ca7fe732679da79347011de87449cbc4ab Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 12 Sep 2024 14:08:29 +0200 Subject: [PATCH 09/16] Update package lock --- package-lock.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index 49d1ad6b123b76..dcdc5043ac6d88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54329,6 +54329,7 @@ "version": "2.7.0", "license": "GPL-2.0-or-later", "dependencies": { + "@wordpress/a11y": "file:../a11y", "@wordpress/interactivity": "file:../interactivity" }, "engines": { @@ -69038,6 +69039,7 @@ "@wordpress/interactivity-router": { "version": "file:packages/interactivity-router", "requires": { + "@wordpress/a11y": "file:../a11y", "@wordpress/interactivity": "file:../interactivity" } }, From f64d4201d93d7617ea64c303c3457d75095befd9 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Mon, 16 Sep 2024 14:12:48 +0200 Subject: [PATCH 10/16] Add comment to gutenberg_register_interactivity_script_module_data_hooks --- lib/interactivity-api.php | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php index 90037c89cc5967..c00d68bc70e8e2 100644 --- a/lib/interactivity-api.php +++ b/lib/interactivity-api.php @@ -36,6 +36,16 @@ function gutenberg_reregister_interactivity_script_modules() { } 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( From 0b7e97847b42002519c727a5a340246c36241908 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Mon, 16 Sep 2024 20:13:58 +0200 Subject: [PATCH 11/16] Remove ariaLive param from a11yAnnounce --- packages/interactivity-router/src/index.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index eefbb8758e7ef0..b76aeffcbb4795 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -365,12 +365,8 @@ export const { state, actions } = store( 'core/router', { * the package on demand and should be used instead of calling `ally.speak` direacly. * * @param messageKey The message to be announced by assistive technologies. - * @param ariaLive The politeness level for aria-live; default: 'polite'. */ -function a11yAnnounce( - messageKey: 'loading' | 'loaded', - ariaLive?: 'polite' | 'assertive' -) { +function a11yAnnounce( messageKey: 'loading' | 'loaded' ) { if ( ! navigationTexts.loadedFromServer ) { navigationTexts.loadedFromServer = true; const content = document.getElementById( @@ -393,7 +389,7 @@ function a11yAnnounce( if ( globalThis.IS_GUTENBERG_PLUGIN ) { import( '@wordpress/a11y' ).then( - ( { speak } ) => speak( message, ariaLive ), + ( { speak } ) => speak( message ), // Ignore failures to load the a11y module. () => {} ); From 63a1ffa83d8643287a621885193192b9fa57fbe9 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Mon, 16 Sep 2024 20:17:30 +0200 Subject: [PATCH 12/16] Move loaded data state out of texts object --- packages/interactivity-router/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index b76aeffcbb4795..f3b77a650c925d 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -209,8 +209,8 @@ const isValidEvent = ( event: MouseEvent ) => // Variable to store the current navigation. let navigatingTo = ''; +let hasLoadedNavigationTextsData = false; const navigationTexts = { - loadedFromServer: false, loading: 'Loading page, please wait.', loaded: 'Page Loaded.', }; @@ -367,8 +367,8 @@ export const { state, actions } = store( 'core/router', { * @param messageKey The message to be announced by assistive technologies. */ function a11yAnnounce( messageKey: 'loading' | 'loaded' ) { - if ( ! navigationTexts.loadedFromServer ) { - navigationTexts.loadedFromServer = true; + if ( ! hasLoadedNavigationTextsData ) { + hasLoadedNavigationTextsData = true; const content = document.getElementById( 'wp-script-module-data-@wordpress/interactivity-router' )?.textContent; From 71515b62132cc7c2beb85d3702eea6c9360ce026 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Mon, 16 Sep 2024 20:18:18 +0200 Subject: [PATCH 13/16] Improve a11yAnnounce param type --- packages/interactivity-router/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index f3b77a650c925d..687f0a23816cca 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -366,7 +366,7 @@ export const { state, actions } = store( 'core/router', { * * @param messageKey The message to be announced by assistive technologies. */ -function a11yAnnounce( messageKey: 'loading' | 'loaded' ) { +function a11yAnnounce( messageKey: keyof typeof navigationTexts ) { if ( ! hasLoadedNavigationTextsData ) { hasLoadedNavigationTextsData = true; const content = document.getElementById( From 325249f43d66128ad556de2bec1495679c2da410 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Mon, 16 Sep 2024 20:18:49 +0200 Subject: [PATCH 14/16] Rename function a11ySpeak --- packages/interactivity-router/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 687f0a23816cca..d36d6cd5631012 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -277,7 +277,7 @@ export const { state, actions } = store( 'core/router', { navigation.hasFinished = false; } if ( screenReaderAnnouncement ) { - a11yAnnounce( 'loading' ); + a11ySpeak( 'loading' ); } }, 400 ); @@ -317,7 +317,7 @@ export const { state, actions } = store( 'core/router', { } if ( screenReaderAnnouncement ) { - a11yAnnounce( 'loaded' ); + a11ySpeak( 'loaded' ); } // Scroll to the anchor if exits in the link. @@ -366,7 +366,7 @@ export const { state, actions } = store( 'core/router', { * * @param messageKey The message to be announced by assistive technologies. */ -function a11yAnnounce( messageKey: keyof typeof navigationTexts ) { +function a11ySpeak( messageKey: keyof typeof navigationTexts ) { if ( ! hasLoadedNavigationTextsData ) { hasLoadedNavigationTextsData = true; const content = document.getElementById( From c9f094028b6e181b4198457e88e7c372d3436504 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Tue, 17 Sep 2024 16:12:25 +0200 Subject: [PATCH 15/16] Add store type to allow texts --- packages/interactivity-router/src/index.ts | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index d36d6cd5631012..40ef03a5c7c08b 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -215,7 +215,26 @@ const navigationTexts = { loaded: 'Page Loaded.', }; -export const { state, actions } = store( 'core/router', { +interface Store { + state: { + url: string; + navigation: { + hasStarted: boolean; + hasFinished: boolean; + message: string; + texts?: { + loading?: string; + loaded?: string; + }; + }; + }; + actions: { + navigate: ( href: string, options?: NavigateOptions ) => void; + prefetch: ( url: string, options?: PrefetchOptions ) => void; + }; +} + +export const { state, actions } = store< Store >( 'core/router', { state: { url: window.location.href, navigation: { From 85821fd6c6079fde5a6440d76599ddebf5581c70 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Tue, 17 Sep 2024 16:12:37 +0200 Subject: [PATCH 16/16] Add fallback for localized texts --- packages/interactivity-router/src/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts index 40ef03a5c7c08b..3bd44c7aebd71f 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -401,6 +401,14 @@ function a11ySpeak( messageKey: keyof typeof navigationTexts ) { navigationTexts.loaded = parsed.i18n.loaded; } } catch {} + } else { + // Fallback to localized strings from Interactivity API state. + if ( state.navigation.texts?.loading ) { + navigationTexts.loading = state.navigation.texts.loading; + } + if ( state.navigation.texts?.loaded ) { + navigationTexts.loaded = state.navigation.texts.loaded; + } } }