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

[Accessibility] Make the matching variations alert a live region (#50132) 

* Add aria label to the Clear variation options link

* Make the matching variations alert a live region

* Bump add-to-cart variable template version

* Add changelog file

* Add docblock comment to woocommerce_reset_variations_link filter

* Revert changes for Clear variations button

* Make unavailable product combination message a live region

* Improve no matching variation message for screen readers

* Align variables declaration

* Bump template version

* Add role alert to the parent of the no matching message

* Add empty alt text for pesudo-element content

---------

Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
This commit is contained in:
Gabriel Manussakis 2024-08-20 13:57:30 -03:00 committed by GitHub
parent d2e9e982ec
commit 7e08187671
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Make the matching variations alert a live region

1
plugins/woocommerce/client/legacy/css/woocommerce.scss
View File

@ -1838,6 +1838,7 @@ p.demo_store,
&::before {
font-family: "WooCommerce";
content: "\e028";
content: "\e028" / ""; // Add an empty alternative text so screen readers ignore it
display: inline-block;
position: absolute;
top: 1em;

39
plugins/woocommerce/client/legacy/js/frontend/add-to-cart-variation.js
View File

@ -26,6 +26,7 @@
self.findMatchingVariations = self.findMatchingVariations.bind( self );
self.isMatch = self.isMatch.bind( self );
self.toggleResetLink = self.toggleResetLink.bind( self );
self.showNoMatchingVariationsMsg = self.showNoMatchingVariationsMsg.bind( self );
// Events.
$form.on( 'click.wc-variation-form', '.reset_variations', { variationForm: self }, self.onReset );
@ -185,14 +186,7 @@
attributes.chosenCount = 0;
if ( ! form.loading ) {
form.$form
.find( '.single_variation' )
.after(
'<p class="wc-no-matching-variations woocommerce-info">' +
wc_add_to_cart_variation_params.i18n_no_matching_variations_text +
'</p>'
);
form.$form.find( '.wc-no-matching-variations' ).slideDown( 200 );
form.showNoMatchingVariationsMsg();
}
}
},
@ -213,14 +207,7 @@
attributes.chosenCount = 0;
if ( ! form.loading ) {
form.$form
.find( '.single_variation' )
.after(
'<p class="wc-no-matching-variations woocommerce-info">' +
wc_add_to_cart_variation_params.i18n_no_matching_variations_text +
'</p>'
);
form.$form.find( '.wc-no-matching-variations' ).slideDown( 200 );
form.showNoMatchingVariationsMsg();
}
}
}
@ -328,7 +315,7 @@
var form = event.data.variationForm;
form.$form.find( 'input[name="variation_id"], input.variation_id' ).val( '' ).trigger( 'change' );
form.$form.find( '.wc-no-matching-variations' ).remove();
form.$form.find( '.wc-no-matching-variations' ).parent().remove();
if ( form.useAjax ) {
form.$form.trigger( 'check_variations' );
@ -569,6 +556,24 @@
}
};
/**
* Show no matching variation message.
*/
VariationForm.prototype.showNoMatchingVariationsMsg = function() {
this.$form
.find( '.single_variation' )
.after(
'<div role="alert">' +
'<p class="wc-no-matching-variations woocommerce-info">' +
wc_add_to_cart_variation_params.i18n_no_matching_variations_text +
'</p>' +
'</div>'
)
.next( 'div' )
.find( '.wc-no-matching-variations' )
.slideDown( 200 );
};
/**
* Function to call wc_variation_form on jquery selector.
*/

4
plugins/woocommerce/templates/single-product/add-to-cart/variation.php
View File

@ -7,7 +7,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 2.5.0
* @version 9.3.0
*/
defined( 'ABSPATH' ) || exit;
@ -19,5 +19,5 @@ defined( 'ABSPATH' ) || exit;
<div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div>
</script>
<script type="text/template" id="tmpl-unavailable-variation-template">
<p><?php esc_html_e( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ); ?></p>
<p role="alert"><?php esc_html_e( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ); ?></p>
</script>