From 7e08187671e11ddd2c7475ca5fc168c6f91bd1bc Mon Sep 17 00:00:00 2001 From: Gabriel Manussakis <9420947+Manussakis@users.noreply.github.com> Date: Tue, 20 Aug 2024 13:57:30 -0300 Subject: [PATCH] [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> --- plugins/woocommerce/changelog/fix-43613 | 4 ++ .../client/legacy/css/woocommerce.scss | 1 + .../js/frontend/add-to-cart-variation.js | 47 ++++++++++--------- .../single-product/add-to-cart/variation.php | 4 +- 4 files changed, 33 insertions(+), 23 deletions(-) create mode 100644 plugins/woocommerce/changelog/fix-43613 diff --git a/plugins/woocommerce/changelog/fix-43613 b/plugins/woocommerce/changelog/fix-43613 new file mode 100644 index 00000000000..c3847d7bcc6 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-43613 @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Make the matching variations alert a live region diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss index e82735b9dc2..8507c3b44f7 100644 --- a/plugins/woocommerce/client/legacy/css/woocommerce.scss +++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss @@ -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; diff --git a/plugins/woocommerce/client/legacy/js/frontend/add-to-cart-variation.js b/plugins/woocommerce/client/legacy/js/frontend/add-to-cart-variation.js index 6e4e68f19b1..b84d6bb4196 100644 --- a/plugins/woocommerce/client/legacy/js/frontend/add-to-cart-variation.js +++ b/plugins/woocommerce/client/legacy/js/frontend/add-to-cart-variation.js @@ -22,10 +22,11 @@ self.$form.off( '.wc-variation-form' ); // Methods. - self.getChosenAttributes = self.getChosenAttributes.bind( self ); - self.findMatchingVariations = self.findMatchingVariations.bind( self ); - self.isMatch = self.isMatch.bind( self ); - self.toggleResetLink = self.toggleResetLink.bind( self ); + self.getChosenAttributes = self.getChosenAttributes.bind( self ); + 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( - '

' + - wc_add_to_cart_variation_params.i18n_no_matching_variations_text + - '

' - ); - 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( - '

' + - wc_add_to_cart_variation_params.i18n_no_matching_variations_text + - '

' - ); - 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( + '
' + + '

' + + wc_add_to_cart_variation_params.i18n_no_matching_variations_text + + '

' + + '
' + ) + .next( 'div' ) + .find( '.wc-no-matching-variations' ) + .slideDown( 200 ); + }; + /** * Function to call wc_variation_form on jquery selector. */ diff --git a/plugins/woocommerce/templates/single-product/add-to-cart/variation.php b/plugins/woocommerce/templates/single-product/add-to-cart/variation.php index 82158b0e88b..38b3002d2aa 100644 --- a/plugins/woocommerce/templates/single-product/add-to-cart/variation.php +++ b/plugins/woocommerce/templates/single-product/add-to-cart/variation.php @@ -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;
{{{ data.variation.availability_html }}}