fix(a11y): Prevent horizontal scroll on smaller screens (#19205)

SAP · Oct 1, 2024 · ed6700b · ed6700b
1 parent 6d1526e
commit ed6700b
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 2 deletions.
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
@@ -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
@@ -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<ItemListContext>
-  ) {}
+  ) {
+    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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<FeatureTogglesInterface> = {
   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
@@ -309,6 +309,7 @@ if (environment.cpq) {
         a11yOrderConfirmationHeadingOrder: true,
         a11yStarRating: true,
         a11yViewChangeAssistiveMessage: true,
+        a11yPreventHorizontalScroll: true,
         a11yReorderDialog: true,
         a11yPopoverFocus: true,
         a11yScheduleReplenishment: true,