Commit bcabbc37b9 for woocommerce
commit bcabbc37b971ff2bc4e452446b939870ab1a0612
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Mon Jun 30 13:33:44 2025 +0530
Fix tab navigation inconsistency between QuantityStepper and QuantitySelector components (#58307)
* refactor: QuantityStepper buttons to render after the input element and adjust CSS order for layout
* fix: Correct order of quantity stepper buttons in AddToCartForm and Utils
* feat: Make QuantityStepper minus button disabled when the min value matches with current value
* fix: Remove unnecessary blank line in style.scss
* feat: Add changelog file
* feat: Update quantity stepper buttons to use iAPI enabling/disabling
* feat: Update quantity stepper buttons to use iAPI enabling/disabling for AddToCartForm block
* fix: lint error
* fix: Refactor getInputElementFromEvent to improve readability
* fix: remove unnecessary change
* feat: Enhance quantity input interactivity by adding child product ID support
* feat: Update quantity handling for grouped products to support child product IDs
* refactor: Simplify quantity input element selection for grouped products
* feat: Allow quantity of 0 for grouped product children in quantity validation
* fix: Issue of quantity selector buttons updating according to the last modified product's quantity
* fix: Issue of descrease stepper not becoming active on change of quantity through input
* revert last change for blockified add-to-cart-with-options block
* fix: Adds missing arguments of function
* feat: Fix the input class selecter issue
* revert the changes of making the minus (-) button disabled when quantity equals the minimum allowed value.
* Update plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
* Update plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/Utils.php
Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
---------
Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
diff --git a/plugins/woocommerce/changelog/58307-fix-quantity-stepper-accessibility b/plugins/woocommerce/changelog/58307-fix-quantity-stepper-accessibility
new file mode 100644
index 0000000000..b7617c2559
--- /dev/null
+++ b/plugins/woocommerce/changelog/58307-fix-quantity-stepper-accessibility
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Fix tab navigation inconsistency between QuantityStepper and QuantitySelector components.
+
+
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/components/quantity-stepper/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/components/quantity-stepper/index.tsx
index a7a96a7998..bc78ab3049 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/components/quantity-stepper/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/components/quantity-stepper/index.tsx
@@ -1,15 +1,15 @@
const QuantityStepper = () => {
return (
<div className="quantity wc-block-components-quantity-selector">
- <button className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">
- -
- </button>
<input
type="number"
value="1"
className="input-text qty text"
readOnly
/>
+ <button className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">
+ -
+ </button>
<button className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">
+
</button>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
index 82aac449b6..fd6e67d535 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
@@ -37,7 +37,7 @@
-moz-appearance: textfield;
border: unset;
text-align: center;
- order: 1;
+ order: 2;
font-weight: 600;
background-color: transparent;
color: currentColor;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss
index ef03bbc513..10ad836fbe 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss
@@ -118,7 +118,7 @@ div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
-moz-appearance: textfield;
border: unset;
text-align: center;
- order: 1;
+ order: 2;
margin: 0;
/**
* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
index 05afa24a4b..34e12fe993 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
@@ -75,14 +75,14 @@ class AddToCartForm extends AbstractBlock {
private function add_steppers( $product_html, $product_name ) {
// Regex pattern to match the <input> element with id starting with 'quantity_'.
$pattern = '/(<input[^>]*id="quantity_[^"]*"[^>]*\/>)/';
- // Replacement string to add button BEFORE the matched <input> element.
+ // Replacement string to add button AFTER the matched <input> element.
/* translators: %s refers to the item name in the cart. */
- $minus_button = '<button aria-label="' . esc_attr( sprintf( __( 'Reduce quantity of %s', 'woocommerce' ), $product_name ) ) . '"type="button" data-wp-on--click="actions.removeQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">-</button>$1';
+ $minus_button = '$1<button aria-label="' . esc_attr( sprintf( __( 'Reduce quantity of %s', 'woocommerce' ), $product_name ) ) . '" type="button" data-wp-on--click="actions.removeQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">-</button>';
// Replacement string to add button AFTER the matched <input> element.
/* translators: %s refers to the item name in the cart. */
$plus_button = '$1<button aria-label="' . esc_attr( sprintf( __( 'Increase quantity of %s', 'woocommerce' ), $product_name ) ) . '" type="button" data-wp-on--click="actions.addQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">+</button>';
- $new_html = preg_replace( $pattern, $minus_button, $product_html );
- $new_html = preg_replace( $pattern, $plus_button, $new_html );
+ $new_html = preg_replace( $pattern, $plus_button, $product_html );
+ $new_html = preg_replace( $pattern, $minus_button, $new_html );
return $new_html;
}
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/Utils.php b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/Utils.php
index ab65958246..ed62ea2f9c 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/Utils.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/Utils.php
@@ -21,14 +21,14 @@ class Utils {
public static function add_quantity_steppers( $quantity_html, $product_name ) {
// Regex pattern to match the <input> element with id starting with 'quantity_'.
$pattern = '/(<input[^>]*id="quantity_[^"]*"[^>]*\/>)/';
- // Replacement string to add button BEFORE the matched <input> element.
+ // Replacement string to add button AFTER the matched <input> element.
/* translators: %s refers to the item name in the cart. */
- $minus_button = '<button aria-label="' . esc_attr( sprintf( __( 'Reduce quantity of %s', 'woocommerce' ), $product_name ) ) . '" type="button" data-wp-on--click="actions.decreaseQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">-</button>$1';
+ $minus_button = '$1<button aria-label="' . esc_attr( sprintf( __( 'Reduce quantity of %s', 'woocommerce' ), $product_name ) ) . '" type="button" data-wp-on--click="actions.decreaseQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">-</button>';
// Replacement string to add button AFTER the matched <input> element.
/* translators: %s refers to the item name in the cart. */
$plus_button = '$1<button aria-label="' . esc_attr( sprintf( __( 'Increase quantity of %s', 'woocommerce' ), $product_name ) ) . '" type="button" data-wp-on--click="actions.increaseQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">+</button>';
- $new_html = preg_replace( $pattern, $minus_button, $quantity_html );
- $new_html = preg_replace( $pattern, $plus_button, $new_html );
+ $new_html = preg_replace( $pattern, $plus_button, $quantity_html );
+ $new_html = preg_replace( $pattern, $minus_button, $new_html );
return $new_html;
}