Interactivity API: Use a11y Script Module in Gutenberg #65123
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -304 B (-0.02%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
from
6296956 to
c0348dd
Compare
|
Flaky tests detected in 85821fd. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10904903884
|
afercia
added
[Focus] Accessibility (a11y)
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
5 times, most recently
from
b63deed to
8406792
Compare
sirreal
force-pushed
the
add-a11y-script-module
branch
from
f59a8be to
4dd71f6
Compare
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
from
8406792 to
df831db
Compare
sirreal
force-pushed
the
add-a11y-script-module
branch
from
4dd71f6 to
a79ceda
Compare
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
2 times, most recently
from
afb51ff to
6f6d8a2
Compare
swissspidy
reviewed
Sep 11, 2024
sirreal
force-pushed
the
add-a11y-script-module
branch
from
d49068e to
41d105d
Compare
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
2 times, most recently
from
359b640 to
14c1dcb
Compare
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
from
14c1dcb to
4d8d9cb
Compare
|
I discovered some issues with setting up live regions and immediately updating them. This indicated a problem with the a11y module that I'm addressing in #65380. I've merged that PR here. |
It's certainly not optimal, it's been brought up before. I've been reluctant to add a module for loading modules, but I think ultimately it will need to happen and it's a question of focusing on it, although I agree this PR is not the place for it. |
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
2 times, most recently
from
c761be2 to
b4ae046
Compare
gziolo
approved these changes
Sep 17, 2024
There was a problem hiding this comment.
Most of the changes come from #65380, which I reviewed first. I tested both PRs with this branch, and everything works as expected. I would appreciate the final check from @DAreRodz and @michalczaplinski. Do you think it's good enough to proceed with bringing the same set of changes to WordPress core in 6.7 release? To give an example of what it opens, it will be possible to reuse speak from @wordpress/a11y when implementing the lightbox for the Gallery block, which was raised during review by @afercia:
Comment on lines
370
to
386
| 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 {} | ||
| } | ||
| } |
There was a problem hiding this comment.
This code eventually could get replaced with dynamically loaded @wordpress/i18n.
Comment on lines
+390
to
+396
| if ( globalThis.IS_GUTENBERG_PLUGIN ) { | ||
| import( '@wordpress/a11y' ).then( | ||
| ( { speak } ) => speak( message ), | ||
| // Ignore failures to load the a11y module. | ||
| () => {} | ||
| ); | ||
| } else { |
There was a problem hiding this comment.
It's behind the flag so the new approach will be only used in the Gutenberg plugin in case we decide against shipping it in the WordPress 6.7.
sirreal
force-pushed
the
update/use-a11y-module-for-interactivity-router
branch
from
b4ae046 to
325249f
Compare
sirreal
commented
Sep 17, 2024
Comment on lines
-218
to
-221
| texts: { | ||
| loading: '', | ||
| loaded: '', | ||
| }, |
There was a problem hiding this comment.
This would overwrite state from the server, it was breaking the server-provided localized strings previously.
Comment on lines
371
to
385
| 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 {} | ||
| } |
There was a problem hiding this comment.
The localized strings weren't working correctly before because the server-provided state was being overwritten with empty strings.
This form will work in Gutenberg but requires #65129 for it to work in Core.
There should be fallback code here to use the localized strings from Interactivity API state.
sirreal
commented
Sep 17, 2024
| ); | ||
| } | ||
| } | ||
| add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 ); |
There was a problem hiding this comment.
With the latest changes to use the localized fallback strings (passed via Interactivity API), if I disable this filter it correctly uses the those strings as a fallback.
#65129 proposes adding this filter to Core.
This was referenced Sep 20, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Change the Interactivity Router a11y implementation to use the a11y Script Module introduced in #65101.
The a11y Script Module will be used in Gutenberg only and if it cannot be loaded, the Interactivity API fallback will be used.
Builds on:
WordPress/wordpress-develop#7304 implements the same script data passing for translated strings in Core.
Why?
Instead of its own 1-off implementation, shared a11y functionality can be used.
Testing Instructions
Enable client side navigation, for example in the query block turn off the "force page reloads" option.
With the proper accessibility set up, for example macOS voiceover, "Page loaded." should be announced when navigating.
Alternatively, you can inspect the DOM with something like this in a console preview:
Screenshots or screencast
demo.mov