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 Pager: Improve accessibility (#43348) 

* Product Gallery Pager: Improve accessibility

* Product Gallery Pager: Fix number pager styling
This commit is contained in:
Daniel Dudzic 2024-01-09 10:48:49 +01:00 committed by GitHub
parent aa4fda8b27
commit 3be8264c5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,6 +51,9 @@ const productGallery = {
get pagerDotFillOpacity(): number {
return state.isSelected ? 1 : 0.2;
},
get pagerButtonPressed(): boolean {
return state.isSelected ? true : false;
},
},
actions: {
closeDialog: () => {

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

@ -308,6 +308,16 @@ $admin-bar-mobile-height: 46px;
margin-top: 0;
margin-bottom: 0;
padding: 0;
button {
border: none;
background: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
padding: 0;
cursor: pointer;
}
}
.wc-block-product-gallery-pager__pager-item {

3
plugins/woocommerce-blocks/changelog/fix-43306-product-gallery-pager-accessibility Normal file
View File

@ -0,0 +1,3 @@
Significance: patch
Type: tweak
Comment: Product Gallery: Improve the accessibility of the Product Gallery Pager.

3
plugins/woocommerce/changelog/fix-43306-product-gallery-pager-accessibility Normal file
View File

@ -0,0 +1,3 @@
Significance: patch
Type: tweak
Comment: Product Gallery: Improve the accessibility of the Product Gallery Pager.

10
plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryPager.php
View File

@ -115,11 +115,13 @@ class ProductGalleryPager extends AbstractBlock {
$is_first_pager_item = 0 === $key;
$pager_item = sprintf(
'<li class="wc-block-product-gallery-pager__pager-item %2$s">%1$s</li>',
'<li class="wc-block-product-gallery-pager__pager-item %2$s"><button aria-pressed="%3$s" data-wc-bind--aria-pressed="state.pagerButtonPressed">%1$s</button></li>',
'dots' === $pager_display_mode ? $this->get_dot_icon( $is_first_pager_item ) : $key + 1,
$is_first_pager_item ? 'wc-block-product-gallery-pager__pager-item--is-active' : ''
$is_first_pager_item ? 'wc-block-product-gallery-pager__pager-item--is-active' : '',
$is_first_pager_item ? 'true' : 'false'
);
$p = new \WP_HTML_Tag_Processor( $pager_item );
$p = new \WP_HTML_Tag_Processor( $pager_item );
if ( $p->next_tag() ) {
$p->set_attribute(
@ -158,7 +160,7 @@ class ProductGalleryPager extends AbstractBlock {
$initial_opacity = $is_active ? '1' : '0.2';
return sprintf(
'<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="6" fill="black" fill-opacity="%1$s" data-wc-bind--fill-opacity="state.pagerDotFillOpacity" />
<circle cx="6" cy="6" r="6" fill="black" fill-opacity="%1$s" data-wc-bind--fill-opacity="state.pagerDotFillOpacity" />
</svg>',
$initial_opacity
);