diff --git a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.ts b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.ts index 39b500e0bf4..078beda5529 100644 --- a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.ts +++ b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.ts @@ -94,6 +94,7 @@ export class AddedToCartDialogComponent implements OnInit, OnDestroy { protected el: ElementRef ) { useFeatureStyles('a11yExpandedFocusIndicator'); + useFeatureStyles('a11yPreventHorizontalScroll'); } ngOnInit(): void { diff --git a/feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts b/feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts index 521daea91fb..11b2ab13c0a 100644 --- a/feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts +++ b/feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts @@ -25,7 +25,11 @@ import { SelectiveCartFacade, CartOutlets, } from '@spartacus/cart/base/root'; -import { FeatureConfigService, UserIdService } from '@spartacus/core'; +import { + FeatureConfigService, + UserIdService, + useFeatureStyles, +} from '@spartacus/core'; import { OutletContextData } from '@spartacus/storefront'; import { Observable, Subscription } from 'rxjs'; import { map, startWith, tap } from 'rxjs/operators'; @@ -93,7 +97,9 @@ export class CartItemListComponent implements OnInit, OnDestroy { protected multiCartService: MultiCartFacade, protected cd: ChangeDetectorRef, @Optional() protected outlet?: OutletContextData - ) {} + ) { + useFeatureStyles('a11yPreventHorizontalScroll'); + } ngOnInit(): void { this.subscription.add(this.getInputsFromContext()); diff --git a/feature-libs/cart/base/styles/components/_added-to-cart-dialog.scss b/feature-libs/cart/base/styles/components/_added-to-cart-dialog.scss index c1e4d1a7639..6d55b33a763 100644 --- a/feature-libs/cart/base/styles/components/_added-to-cart-dialog.scss +++ b/feature-libs/cart/base/styles/components/_added-to-cart-dialog.scss @@ -84,6 +84,16 @@ } } + @include forFeature('a11yPreventHorizontalScroll') { + .cx-quantity { + @include media-breakpoint-down(xs) { + flex-direction: column; + align-items: start; + gap: 5px; + } + } + } + .cx-actions { justify-content: flex-start; } diff --git a/feature-libs/cart/base/styles/components/_cart-item-list.scss b/feature-libs/cart/base/styles/components/_cart-item-list.scss index 0d9b5572dc5..581297a7163 100644 --- a/feature-libs/cart/base/styles/components/_cart-item-list.scss +++ b/feature-libs/cart/base/styles/components/_cart-item-list.scss @@ -59,6 +59,10 @@ .cx-code { color: var(--cx-color-secondary); margin-top: 0.5em; + + @include forFeature('a11yPreventHorizontalScroll') { + overflow-wrap: anywhere; + } } .cx-link { diff --git a/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts b/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts index e0f9f4c248c..4ac716b8aec 100644 --- a/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts +++ b/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts @@ -45,6 +45,7 @@ export class AddToSavedCartComponent implements OnInit, OnDestroy { protected launchDialogService: LaunchDialogService ) { useFeatureStyles('a11yExpandedFocusIndicator'); + useFeatureStyles('a11yUseButtonsForBtnLinks'); } ngOnInit(): void { diff --git a/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss b/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss index 5b8ee12c84d..981bdf09a07 100644 --- a/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss +++ b/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss @@ -9,6 +9,12 @@ cx-add-to-saved-cart { .cx-action-link { &:nth-child(n + 2) { margin-inline-end: 0; + + @include forFeature('a11yUseButtonsForBtnLinks') { + display: flex; + align-items: start; + } + &:before { content: '|'; @include forFeature('a11yExpandedFocusIndicator') { 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 ba5da72b3b7..0def51ad997 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 @@ -186,6 +186,11 @@ export interface FeatureTogglesInterface { */ a11yViewChangeAssistiveMessage?: boolean; + /** + * Prevent horizontal scroll appearing on smaller screens for `CartItemListComponent`, `AddedToCartDialogComponent` + */ + a11yPreventHorizontalScroll?: boolean; + /** * Refocuses inside of 'ReorderDialogComponent' after its content updates. */ @@ -626,6 +631,7 @@ export const defaultFeatureToggles: Required = { a11yOrderConfirmationHeadingOrder: false, a11yStarRating: false, a11yViewChangeAssistiveMessage: false, + a11yPreventHorizontalScroll: false, a11yReorderDialog: false, a11yPopoverFocus: false, a11yScheduleReplenishment: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 981bae458ea..2269d17e659 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -309,6 +309,7 @@ if (environment.cpq) { a11yOrderConfirmationHeadingOrder: true, a11yStarRating: true, a11yViewChangeAssistiveMessage: true, + a11yPreventHorizontalScroll: true, a11yReorderDialog: true, a11yPopoverFocus: true, a11yScheduleReplenishment: true,