Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Accessibility] Remove title attribute from images in product gallery (#50886) 

* Remove title attribute from images in product gallery

* Remove wp-post-image class from image selector

* Scope the image locator to the link

* Add changelog file

* Move image params filter out of wp_get_attachment_image call

* Add docblock to the woocommerce_gallery_image_html_attachment_image_params filter

* Remove unnecessary empty space
This commit is contained in:
Gabriel Manussakis 2024-08-23 16:37:45 -03:00 committed by GitHub
parent 6c4a26770d
commit 50e7a85821
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/fix-43576 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Remove title attribute from images in product slider.

46
plugins/woocommerce/includes/wc-template-functions.php
View File

@ -1615,25 +1615,39 @@ function wc_get_gallery_image_html( $attachment_id, $main_image = false ) {
$thumbnail_srcset = wp_get_attachment_image_srcset( $attachment_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $attachment_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
$image = wp_get_attachment_image(
/**
* Filters the attributes for the image markup.
*
* @since 3.3.2
*
* @param array $image_attributes Attributes for the image markup.
*/
$image_params = apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
),
$attachment_id,
$image_size,
$main_image
);
if ( isset( $image_params['title'] ) ) {
unset( $image_params['title'] );
}
$image = wp_get_attachment_image(
$attachment_id,
$image_size,
false,
apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
),
$attachment_id,
$image_size,
$main_image
)
$image_params
);
return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" data-thumb-srcset="' . esc_attr( $thumbnail_srcset ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . '</a></div>';

8
plugins/woocommerce/tests/e2e-pw/tests/merchant/product-images.spec.js
View File

@ -110,7 +110,9 @@ test.describe(
// Verify image in store frontend
await page.goto( product.permalink );
await expect( page.getByTitle( `image-01` ) ).toBeVisible();
await expect(
page.locator( `img.wp-post-image[src*="image-01"]` )
).toBeVisible();
} );
} );
@ -150,7 +152,9 @@ test.describe(
// Verify image in store frontend
await page.goto( productWithImage.permalink );
await expect( page.getByTitle( `image-02` ) ).toBeVisible();
await expect(
page.locator( `img.wp-post-image[src*="image-02"]` )
).toBeVisible();
} );
} );

12
plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-images-block-editor.spec.js
View File

@ -107,7 +107,11 @@ test( 'can add images', { tag: '@gutenberg' }, async ( { page, product } ) => {
await page.goto( product.permalink );
for ( const image of images ) {
await expect( page.getByTitle( image ) ).toBeVisible();
await expect(
// By scopping the locator to the link, we exclude the zoom image and
// ensure the correct image is displayed.
page.locator( `a > img[src*="${ image }"]` )
).toBeVisible();
}
} );
} );
@ -160,7 +164,11 @@ test(
// Verify image in store frontend
await page.goto( productWithGallery.permalink );
await expect( page.getByTitle( newImageName ) ).toBeVisible();
await expect(
// By scopping the locator to the link, we exclude the zoom image and
// ensure the correct image is displayed.
page.locator( `a > img[src*="${ newImageName }"]` )
).toBeVisible();
} );
}
);