Script Loader: Add @wordpress/a11y as a Script Module.

The Script Module has the same API as the `wp-a11y` WP Script.

Key changes:
- Add `@wordpress/a11y` to the list of Script and Module dual packages.
- Update `script-modules-packages.min.php` to include the a11y module.
- Modify `WP_Script_Modules` class to track and handle a11y module availability.
- Add method to print required HTML markup for a11y `speak()` functionality.

See #60647.
Props jonsurrell, gziolo, czapla.


git-svn-id: https://develop.svn.wordpress.org/trunk@59089 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/assets/script-modules-packages.min.php

@@ -1 +1 @@
-<?php return array('interactivity/index.min.js' => array('dependencies' => array(), 'version' => '2d6d1fdbcb3fda39c768', 'type' => 'module'), 'interactivity/debug.min.js' => array('dependencies' => array(), 'version' => '1ccc67b05c275e51a8f8', 'type' => 'module'), 'interactivity-router/index.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '64645ef3cd2d32860d7d', 'type' => 'module'), 'block-library/file/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => 'fdc2f6842e015af83140', 'type' => 'module'), 'block-library/image/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => 'acfec7b3c0be4a859b31', 'type' => 'module'), 'block-library/navigation/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '8ff192874fc8910a284c', 'type' => 'module'), 'block-library/query/view.min.js' => array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'f4c91c89fa5271f3dad9', 'type' => 'module'), 'block-library/search/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '2a73400a693958f604de', 'type' => 'module'));
+<?php return array('interactivity/index.min.js' => array('dependencies' => array(), 'version' => '2d6d1fdbcb3fda39c768', 'type' => 'module'), 'interactivity/debug.min.js' => array('dependencies' => array(), 'version' => '1ccc67b05c275e51a8f8', 'type' => 'module'), 'interactivity-router/index.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '64645ef3cd2d32860d7d', 'type' => 'module'), 'a11y/index.min.js' => array('dependencies' => array(), 'version' => 'b7d06936b8bc23cff2ad', 'type' => 'module'), 'block-library/file/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => 'fdc2f6842e015af83140', 'type' => 'module'), 'block-library/image/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => 'acfec7b3c0be4a859b31', 'type' => 'module'), 'block-library/navigation/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '8ff192874fc8910a284c', 'type' => 'module'), 'block-library/query/view.min.js' => array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'f4c91c89fa5271f3dad9', 'type' => 'module'), 'block-library/search/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '2a73400a693958f604de', 'type' => 'module'));

src/wp-includes/class-wp-script-modules.php

@@ -30,6 +30,17 @@ class WP_Script_Modules {
 	 */
 	private $enqueued_before_registered = array();
 
+	/**
+	 * Tracks whether the @wordpress/a11y script module is available.
+	 *
+	 * Some additional HTML is required on the page for the module to work. Track
+	 * whether it's available to print at the appropriate time.
+	 *
+	 * @since 6.7.0
+	 * @var bool
+	 */
+	private $a11y_available = false;
+
 	/**
 	 * Registers the script module if no script module with that script module
 	 * identifier has already been registered.
@@ -185,6 +196,8 @@ public function add_hooks() {
 
 		add_action( 'wp_footer', array( $this, 'print_script_module_data' ) );
 		add_action( 'admin_print_footer_scripts', array( $this, 'print_script_module_data' ) );
+		add_action( 'wp_footer', array( $this, 'print_a11y_script_module_html' ), 20 );
+		add_action( 'admin_print_footer_scripts', array( $this, 'print_a11y_script_module_html' ), 20 );
 	}
 
 	/**
@@ -367,9 +380,15 @@ private function get_src( string $id ): string {
 	public function print_script_module_data(): void {
 		$modules = array();
 		foreach ( array_keys( $this->get_marked_for_enqueue() ) as $id ) {
+			if ( '@wordpress/a11y' === $id ) {
+				$this->a11y_available = true;
+			}
 			$modules[ $id ] = true;
 		}
 		foreach ( array_keys( $this->get_import_map()['imports'] ) as $id ) {
+			if ( '@wordpress/a11y' === $id ) {
+				$this->a11y_available = true;
+			}
 			$modules[ $id ] = true;
 		}
 
@@ -465,4 +484,20 @@ public function print_script_module_data(): void {
 			}
 		}
 	}
+
+	/**
+	 * @access private This is only intended to be called by the registered actions.
+	 *
+	 * @since 6.7.0
+	 */
+	public function print_a11y_script_module_html() {
+		if ( ! $this->a11y_available ) {
+			return;
+		}
+		echo '<div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;">'
+			. '<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden>' . esc_html__( 'Notifications' ) . '</p>'
+			. '<div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>'
+			. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
+			. '</div>';
+	}
 }

tools/webpack/shared.js

@@ -103,6 +103,7 @@ const MODULES = [
 	'@wordpress/interactivity-router',
 ];
 const SCRIPT_AND_MODULE_DUAL_PACKAGES = [
+	'@wordpress/a11y',
 	'@wordpress/block-library',
 ];
 const WORDPRESS_NAMESPACE = '@wordpress/';