Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
May 29, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58c70e3
Fix translatable labels and escaping.
afercia May 25, 2023
e948e1a
Improve labels.
afercia May 25, 2023
229959a
Adjust test.
afercia May 25, 2023
9d702d1
Simplify labels and use aria-label for the dialog.
afercia May 25, 2023
e4e7df8
Add missing button type attribute.
afercia May 25, 2023
5c3ca57
Fix typo.
afercia May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions packages/block-library/src/image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably also escape the dialog label here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only user provided texts are escaped in WordPress core.

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"
Expand All @@ -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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably also escape the close button label here.

$close_button_icon
</button>
$modal_content
$content
<div class="scrim" style="background-color: $background_color"></div>
</div>
</div>
Expand Down
12 changes: 5 additions & 7 deletions test/e2e/specs/editor/blocks/image.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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',
} );
} );

Expand Down