diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 828211f4f135d6..3eb84f86af7ed2 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -49,9 +49,13 @@ 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(); @@ -59,21 +63,18 @@ function render_block_core_image( $attributes, $content ) { $img = null; preg_match( '/]+>/', $content, $img ); $button = '
- ' + ' . $img[0] . '
'; $body_content = preg_replace( '/]+>/', $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 = ''; + $dialog_label = $alt_attribute ? $alt_attribute : __( 'Image' ); + + $close_button_label = __( 'Close' ); + return << - - $modal_content + $content
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 123d734f58279d..55f2a217e7f537 100644 --- 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', } ); } );