diff --git a/extensions/blocks/image-compare/image-compare.php b/extensions/blocks/image-compare/image-compare.php index 1a01c03861517..4a676d8382230 100644 --- a/extensions/blocks/image-compare/image-compare.php +++ b/extensions/blocks/image-compare/image-compare.php @@ -38,6 +38,11 @@ function register_block() { */ function load_assets( $attr, $content ) { Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME ); + wp_localize_script( + 'jetpack-block-' . sanitize_title_with_dashes( FEATURE_NAME ), + 'imageCompareHandle', + __( 'Slide to compare images', 'jetpack' ) + ); if ( Blocks::is_amp_request() ) { $content = preg_replace( '#
#s', @@ -49,7 +54,6 @@ function load_assets( $attr, $content ) { return $content; } - /** * Render image compare block for AMP * diff --git a/extensions/blocks/image-compare/view.js b/extensions/blocks/image-compare/view.js index d73ef168548d5..fa105c1688fed 100644 --- a/extensions/blocks/image-compare/view.js +++ b/extensions/blocks/image-compare/view.js @@ -355,6 +355,10 @@ domReady( function () { this.controller.setAttribute( 'aria-valuenow', 50 ); this.controller.setAttribute( 'aria-valuemin', 0 ); this.controller.setAttribute( 'aria-valuemax', 100 ); + this.controller.setAttribute( + 'aria-label', + window.imageCompareHandle || 'Slide to compare images' + ); this.handle.appendChild( this.leftArrow ); this.handle.appendChild( this.control );