Work-around issue with disabled buttons causing lose of focus inside …

…the Mini-Cart drawer
woocommerce · May 11, 2023 · 351a216 · 351a216
1 parent 9b22aae
commit 351a216
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/assets/js/base/components/quantity-selector/index.tsx b/assets/js/base/components/quantity-selector/index.tsx
@@ -194,8 +194,11 @@ const QuantitySelector = ( {
 					),
 					itemName
 				) }
-				className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-				disabled={ disabled || ! canDecrease }
+				className={ classNames(
+					'wc-block-components-quantity-selector__button',
+					'wc-block-components-quantity-selector__button--minus',
+					{ 'is-disabled': disabled || ! canDecrease }
+				) }
 				onClick={ () => {
 					const newQuantity = quantity - step;
 					onChange( newQuantity );
@@ -211,6 +214,8 @@ const QuantitySelector = ( {
 					);
 					normalizeQuantity( newQuantity );
 				} }
+				aria-disabled={ disabled || ! canDecrease }
+				tabIndex={ disabled || ! canDecrease ? -1 : undefined }
 			>
 				&#65293;
 			</button>
@@ -223,8 +228,11 @@ const QuantitySelector = ( {
 					),
 					itemName
 				) }
-				disabled={ disabled || ! canIncrease }
-				className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+				className={ classNames(
+					'wc-block-components-quantity-selector__button',
+					'wc-block-components-quantity-selector__button--plus',
+					{ 'is-disabled': disabled || ! canIncrease }
+				) }
 				onClick={ () => {
 					const newQuantity = quantity + step;
 					onChange( newQuantity );
@@ -240,6 +248,8 @@ const QuantitySelector = ( {
 					);
 					normalizeQuantity( newQuantity );
 				} }
+				aria-disabled={ disabled || ! canIncrease }
+				tabIndex={ disabled || ! canIncrease ? -1 : undefined }
 			>
 				&#65291;
 			</button>

diff --git a/assets/js/base/components/quantity-selector/style.scss b/assets/js/base/components/quantity-selector/style.scss
@@ -81,7 +81,7 @@
 		&:focus {
 			opacity: 1;
 		}
-		&:disabled {
+		&.is-disabled {
 			box-shadow: none;
 			cursor: default;
 			opacity: 0.6;