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

Product Gallery block: Announce Pop-Up Opening with Voiceovers (#44332) 

* Add aria attributes to product gallery pop-up

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix Interactivity API store import

* Announce Dialog opening with VoiceOver

* fix php cs lint error

* Remove unnecessary data-wc-watch directive from Product Gallery block

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexandre Lara 2024-02-06 14:28:33 -03:00 committed by GitHub
parent 45923dc5f3
commit 0654fa1997
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx
View File

@ -70,6 +70,25 @@ const productGallery = {
document.body.classList.add(
'wc-block-product-gallery-modal-open'
);
const dialogOverlay = document.querySelector(
'.wc-block-product-gallery-dialog__overlay'
);
if ( ! dialogOverlay ) {
return;
}
( dialogOverlay as HTMLElement ).focus();
const dialogPreviousButton = dialogOverlay.querySelectorAll(
'.wc-block-product-gallery-large-image-next-previous--button'
)[ 0 ];
if ( ! dialogPreviousButton ) {
return;
}
setTimeout( () => {
( dialogPreviousButton as HTMLButtonElement ).focus();
}, 100 );
},
selectImage: () => {
const context = getContext();

4
plugins/woocommerce/changelog/44332-fix-43760-announce-pop-up-opening-with-voiceovers Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Announce Pop-Up Opening with Voiceovers

32
plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
View File

@ -78,24 +78,26 @@ class ProductGallery extends AbstractBlock {
$gallery_dialog = strtr(
'
<div class="wc-block-product-gallery-dialog__overlay" hidden data-wc-bind--hidden="!context.isDialogOpen" data-wc-watch="callbacks.keyboardAccess">
<dialog data-wc-bind--open="context.isDialogOpen">
<div class="wc-block-product-gallery-dialog__header">
<div class="wc-block-product-galler-dialog__header-right">
<button class="wc-block-product-gallery-dialog__close" data-wc-on--click="actions.closeDialog">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="2"/>
<path d="M13 11.8L19.1 5.5L18.1 4.5L12 10.7L5.9 4.5L4.9 5.5L11 11.8L4.5 18.5L5.5 19.5L12 12.9L18.5 19.5L19.5 18.5L13 11.8Z" fill="black"/>
</svg>
</button>
</div>
</div>
<div class="wc-block-product-gallery-dialog__body">
{{html}}
</div>
<dialog data-wc-bind--open="context.isDialogOpen" role="dialog" aria-modal="true" aria-label="{{dialog_aria_label}}">
<div class="wc-block-product-gallery-dialog__header">
<div class="wc-block-product-galler-dialog__header-right">
<button class="wc-block-product-gallery-dialog__close" data-wc-on--click="actions.closeDialog" aria-label="{{close_dialog_aria_label}}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="2"/>
<path d="M13 11.8L19.1 5.5L18.1 4.5L12 10.7L5.9 4.5L4.9 5.5L11 11.8L4.5 18.5L5.5 19.5L12 12.9L18.5 19.5L19.5 18.5L13 11.8Z" fill="black"/>
</svg>
</button>
</div>
</div>
<div class="wc-block-product-gallery-dialog__body">
{{html}}
</div>
</dialog>
</div>',
array(
'{{html}}' => $html_processor->get_updated_html(),
'{{html}}' => $html_processor->get_updated_html(),
'{{dialog_aria_label}}' => __( 'Product gallery', 'woocommerce' ),
'{{close_dialog_aria_label}}' => __( 'Close Product Gallery dialog', 'woocommerce' ),
)
);
return $gallery_dialog;

8
plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImageNextPrevious.php
View File

@ -89,6 +89,10 @@ class ProductGalleryLargeImageNextPrevious extends AbstractBlock {
'data-wc-on--click',
'actions.selectPreviousImage'
);
$p->set_attribute(
'aria-label',
__( 'Previous image', 'woocommerce' )
);
$prev_button = $p->get_updated_html();
}
@ -100,6 +104,10 @@ class ProductGalleryLargeImageNextPrevious extends AbstractBlock {
'data-wc-on--click',
'actions.selectNextImage'
);
$p->set_attribute(
'aria-label',
__( 'Next image', 'woocommerce' )
);
$next_button = $p->get_updated_html();
}