Tiled Gallery: Accessibility - when images are not interactive, remov…

…e button role and tabindex. (#40241)

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/12034417082

Upstream-Ref: Automattic/jetpack@f55374c

CHANGELOG.md

@@ -6,6 +6,9 @@
 
 This is an alpha version! The changes listed here are not final.
 
+### Improved compatibility
+- Tiled Gallery: Increase accessibility by ensuring images are not classified as interactive when they shouldn't be.
+
 ### Other changes <!-- Non-user-facing changes go here. This section will not be copied to readme.txt. -->
 - Classic Theme Helper: Adding Testimonial custom post type content
 - Likes: Add a filter to the iframe url to enable future expansion and modularity.

extensions/blocks/tiled-gallery/tiled-gallery.php

@@ -13,6 +13,7 @@
 use Automattic\Jetpack\Blocks;
 use Automattic\Jetpack\Current_Plan as Jetpack_Plan;
 use Automattic\Jetpack\Status;
+use Automattic\Jetpack\Status\Host;
 use Jetpack;
 use Jetpack_Gutenberg;
 
@@ -150,6 +151,9 @@ public static function render( $attr, $content ) {
 			}
 		}
 
+		// Apply non-interactive markup last to clean up interactivity attributes.
+		$content = self::non_interactive_markup( $attr, $content );
+
 		/**
 		 * Filter the output of the Tiled Galleries content.
 		 *
@@ -162,6 +166,31 @@ public static function render( $attr, $content ) {
 		return apply_filters( 'jetpack_tiled_galleries_block_content', $content );
 	}
 
+	/**
+	 * Removes tabindex and role markup for images that should not be interactive.
+	 *
+	 * @param array  $attr Attributes key/value array.
+	 * @param string $content String containing the block content.
+	 */
+	private static function non_interactive_markup( $attr, $content ) {
+		$link_to = $attr['linkTo'] ?? 'none';
+
+		$host             = new Host();
+		$is_module_active = $host->is_wpcom_simple()
+		? get_option( 'carousel_enable_it' )
+		: Jetpack::is_module_active( 'carousel' );
+
+		if ( $link_to === 'none' && ! $is_module_active ) {
+			// Remove tabIndex and role="button" by replacing the content
+			$content = preg_replace(
+				'/\s*(role="button"|tabindex="0")/',
+				'',
+				$content
+			);
+		}
+		return $content;
+	}
+
 	/**
 	 * Determines whether a Tiled Gallery block uses square or circle images (1:1 ratio)
 	 *