diff --git a/feature-libs/cart/base/styles/components/_item-counter.scss b/feature-libs/cart/base/styles/components/_item-counter.scss index f6cf1219c9c..bb6057d907a 100644 --- a/feature-libs/cart/base/styles/components/_item-counter.scss +++ b/feature-libs/cart/base/styles/components/_item-counter.scss @@ -13,6 +13,7 @@ -moz-appearance: textfield; } } + &.readonly { button { display: none; @@ -77,8 +78,17 @@ font-weight: var(--cx-font-weight-bold); } + // TODO: The styles for ":disabled" selector should be deleted when "a11yItemCounterFocus" feature flag has been removed &:disabled { color: var(--cx-color-light); + cursor: not-allowed; + } + + @include forFeature('a11yItemCounterFocus') { + &[aria-disabled='true'] { + color: var(--cx-color-light); + cursor: not-allowed; + } } @include forFeature('a11yImproveContrast') { @@ -90,9 +100,15 @@ &:focus { box-shadow: 0 0 0 0; } + // TODO: The styles for ":disabled" selector should be deleted when "a11yItemCounterFocus" feature flag has been removed &:disabled { color: var(--cx-color-dark); } + @include forFeature('a11yItemCounterFocus') { + &[aria-disabled='true'] { + color: var(--cx-color-dark); + } + } } } diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts index e146e4fd523..fbcb1148a1d 100644 --- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts +++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts @@ -582,6 +582,12 @@ export interface FeatureTogglesInterface { */ a11ySearchBoxFocusOnEscape?: boolean; + /** + * In `ItemCounterComponenet`, Remove button no longer lose focus after activating when count is 2. + * Add button no longer lose focus after activating when count is `max - 1`. + */ + a11yItemCounterFocus?: boolean; + /** * `ProductIntroComponent` should now scroll to the Review tab on the first click of the 'Show Review' button. */ @@ -765,6 +771,7 @@ export const defaultFeatureToggles: Required = { a11yDialogTriggerRefocus: false, a11yAddToWishlistFocus: false, a11ySearchBoxFocusOnEscape: false, + a11yItemCounterFocus: false, a11yScrollToReviewByShowReview: false, a11yViewHoursButtonIconContrast: false, occCartNameAndDescriptionInHttpRequestBody: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 4f75034c7ba..c56eeb582dc 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -376,6 +376,7 @@ if (environment.cpq) { a11yDialogTriggerRefocus: true, a11yAddToWishlistFocus: true, a11ySearchBoxFocusOnEscape: true, + a11yItemCounterFocus: true, a11yScrollToReviewByShowReview: true, a11yViewHoursButtonIconContrast: true, cmsBottomHeaderSlotUsingFlexStyles: true, diff --git a/projects/storefrontlib/shared/components/item-counter/item-counter.component.html b/projects/storefrontlib/shared/components/item-counter/item-counter.component.html index 6a3fd29b2a1..277bbcdeb7c 100644 --- a/projects/storefrontlib/shared/components/item-counter/item-counter.component.html +++ b/projects/storefrontlib/shared/components/item-counter/item-counter.component.html @@ -1,4 +1,17 @@ + +