Add a11y HTML to page

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

@@ -30,6 +30,17 @@ class WP_Script_Modules {
 	 */
 	private $enqueued_before_registered = array();
 
+	/**
+	 * Tracks wehther 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,15 @@ public function print_script_module_data(): void {
 			}
 		}
 	}
+
+	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>';
+	}
 }