diff --git a/CHANGELOG.md b/CHANGELOG.md index 95c660f3d4..3adba3bc52 100644 --- a/CHANGELOG.md +++ b/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 - Classic Theme Helper: Adding Testimonial custom post type content - Likes: Add a filter to the iframe url to enable future expansion and modularity. diff --git a/extensions/blocks/tiled-gallery/tiled-gallery.php b/extensions/blocks/tiled-gallery/tiled-gallery.php index 1670a7760a..3be4604368 100644 --- a/extensions/blocks/tiled-gallery/tiled-gallery.php +++ b/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) *