Translatable aria-label for image compare block slider (#17501)

Co-authored-by: Brad Jorsch <[email protected]>
Automattic · Oct 27, 2020 · 50c6a0e · 50c6a0e
1 parent 8446773
commit 50c6a0e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git 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(
 			'#<div class="juxtapose".+?</div>#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
@@ -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 );