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

[Experimental] Product Gallery: Update div elements to ul/li for better accessibility (#43612) 

* Product Gallery: Update div elements to ul and li for better accessibility

* Product Gallery: Add changelog files

---------

Co-authored-by: roykho <roykho77@gmail.com>
This commit is contained in:
Danny Dudzic 2024-01-15 22:04:03 +01:00 committed by GitHub
parent 31c170f80c
commit 43be71a52f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss
View File

@ -147,6 +147,18 @@ $admin-bar-mobile-height: 46px;
max-width: $outside-image-max-width; max-width: $outside-image-max-width;
} }
.wc-block-product-gallery-large-image__container {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: auto;
width: fit-content;
height: fit-content;
align-items: center;
margin: 0;
padding: 0;
}
.wc-block-product-gallery-large-image__wrapper { .wc-block-product-gallery-large-image__wrapper {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
flex-shrink: 0; flex-shrink: 0;
@ -158,16 +170,6 @@ $admin-bar-mobile-height: 46px;
scroll-snap-align: none center; scroll-snap-align: none center;
} }
.wc-block-product-gallery-large-image__container {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: auto;
width: fit-content;
height: fit-content;
align-items: center;
}
#{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element {
width: fit-content; width: fit-content;
overflow: hidden; overflow: hidden;

3
plugins/woocommerce-blocks/changelog/fix-43304-product-gallery-block-accessibility Normal file
View File

@ -0,0 +1,3 @@
Significance: patch
Type: tweak
Comment: Product Gallery: Update div elements to ul and li for better accessibility.

3
plugins/woocommerce/changelog/fix-43304-product-gallery-block-accessibility Normal file
View File

@ -0,0 +1,3 @@
Significance: patch
Type: tweak
Comment: Product Gallery: Update div elements to ul and li for better accessibility.

6
plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
View File

@ -87,9 +87,9 @@ class ProductGalleryLargeImage extends AbstractBlock {
return strtr( return strtr(
'<div class="wc-block-product-gallery-large-image wp-block-woocommerce-product-gallery-large-image" {directives}> '<div class="wc-block-product-gallery-large-image wp-block-woocommerce-product-gallery-large-image" {directives}>
<div class="wc-block-product-gallery-large-image__container"> <ul class="wc-block-product-gallery-large-image__container">
{main_images} {main_images}
</div> </ul>
{content} {content}
</div>', </div>',
array( array(
@ -142,7 +142,7 @@ class ProductGalleryLargeImage extends AbstractBlock {
$main_image_with_wrapper = array_map( $main_image_with_wrapper = array_map(
function( $main_image_element ) { function( $main_image_element ) {
return "<div class='wc-block-product-gallery-large-image__wrapper'>" . $main_image_element . '</div>'; return "<li class='wc-block-product-gallery-large-image__wrapper'>" . $main_image_element . '</li>';
}, },
$main_images $main_images
); );