Improve the image block lightbox translations, labelling, and escaping (#50962)

afercia · cbravobernal · commit e0f6299c3935 · 2023-05-29T14:24:12.000+02:00
* Fix translatable labels and escaping.

* Improve labels.

* Adjust test.

* Simplify labels and use aria-label for the dialog.

* Add missing button type attribute.

* Fix typo.
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -49,31 +49,32 @@ function render_block_core_image( $attributes, $content ) {
 
 	if ( ! empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) && 'none' === $link_destination && $lightbox ) {
 
-		$aria_label = 'Open image lightbox';
-		if ( $processor->get_attribute( 'alt' ) ) {
-			$aria_label .= ' : ' . $processor->get_attribute( 'alt' );
+		$aria_label = __( 'Enlarge image' );
+
+		$alt_attribute = trim( $processor->get_attribute( 'alt' ) );
+
+		if ( $alt_attribute ) {
+			/* translators: %s: Image alt text. */
+			$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
 		}
 		$content = $processor->get_updated_html();
 
 		// Wrap the image in the body content with a button.
 		$img = null;
 		preg_match( '/<img[^>]+>/', $content, $img );
 		$button       = '<div class="img-container">
-			 					<button aria-haspopup="dialog" aria-label="' . $aria_label . '" data-wp-on.click="actions.core.image.showLightbox"></button>'
+			 					<button type="button" aria-haspopup="dialog" aria-label="' . esc_attr( $aria_label ) . '" data-wp-on.click="actions.core.image.showLightbox"></button>'
 									. $img[0] .
 								'</div>';
 		$body_content = preg_replace( '/<img[^>]+>/', $button, $content );
 
-		// For the modal, set an ID on the image to be used for an aria-labelledby attribute.
-		$modal_content = new WP_HTML_Tag_Processor( $content );
-		$modal_content->next_tag( 'img' );
-		$image_lightbox_id = $modal_content->get_attribute( 'class' ) . '-lightbox';
-		$modal_content->set_attribute( 'id', $image_lightbox_id );
-		$modal_content = $modal_content->get_updated_html();
-
 		$background_color  = wp_get_global_styles( array( 'color', 'background' ) );
 		$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 
+		$dialog_label = $alt_attribute ? $alt_attribute : __( 'Image' );
+
+		$close_button_label = __( 'Close' );
+
 		return
 			<<<HTML
 				<div class="wp-lightbox-container"
@@ -82,7 +83,7 @@ function render_block_core_image( $attributes, $content ) {
 						$body_content
 						<div data-wp-body="" class="wp-lightbox-overlay"
 							data-wp-bind.role="selectors.core.image.roleAttribute"
-							aria-labelledby="$image_lightbox_id"
+							aria-label="$dialog_label"
 							data-wp-class.initialized="context.core.image.initialized"
 							data-wp-class.active="context.core.image.lightboxEnabled"
 							data-wp-bind.aria-hidden="!context.core.image.lightboxEnabled"
@@ -92,10 +93,10 @@ function render_block_core_image( $attributes, $content ) {
 							data-wp-on.mousewheel="actions.core.image.hideLightbox"
 							data-wp-on.click="actions.core.image.hideLightbox"
 							>
-								<button aria-label="Close lightbox" class="close-button" data-wp-on.click="actions.core.image.hideLightbox">
+								<button type="button" aria-label="$close_button_label" class="close-button" data-wp-on.click="actions.core.image.hideLightbox">
 									$close_button_icon
 								</button>
-								$modal_content
+								$content
 								<div class="scrim" style="background-color: $background_color"></div>
 						</div>
 				</div>
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
@@ -831,14 +831,12 @@ test.describe( 'Image - interactivity', () => {
 		const image = lightbox.locator( 'img' );
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
 
-		await page
-			.getByRole( 'button', { name: 'Open image lightbox' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Enlarge image' } ).click();
 
 		await expect( lightbox ).toBeVisible();
 
-		const closeButton = page.getByRole( 'button', {
-			name: 'Close lightbox',
+		const closeButton = lightbox.getByRole( 'button', {
+			name: 'Close',
 		} );
 		await closeButton.click();
 
@@ -860,11 +858,11 @@ test.describe( 'Image - interactivity', () => {
 			await page.goto( `/?p=${ postId }` );
 
 			openLightboxButton = page.getByRole( 'button', {
-				name: 'Open image lightbox',
+				name: 'Enlarge image',
 			} );
 			lightbox = page.getByRole( 'dialog' );
 			closeButton = lightbox.getByRole( 'button', {
-				name: 'Close lightbox',
+				name: 'Close',
 			} );
 		} );
 
