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

…e button role and tabindex. (#40241)

projects/plugins/jetpack/changelog/fix-tiled-gallery-link-none-accessibility

@@ -0,0 +1,4 @@
+Significance: patch
+Type: compat
+
+Tiled Gallery: Increase accessibility by ensuring images are not classified as interactive when they shouldn't be.

projects/plugins/jetpack/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)
 	 *