fix: (CXSPA-9050) - Fix borders in high-contrast dark and light themes.

feature-libs/cart/saved-cart/components/list/saved-cart-list.component.ts

@@ -65,6 +65,7 @@ export class SavedCartListComponent implements OnInit, OnDestroy {
   ) {
     useFeatureStyles('a11ySavedCartsZoom');
     useFeatureStyles('a11yQTY2Quantity');
+    useFeatureStyles('a11yHighContrastBorders');
   }
 
   ngOnInit(): void {

feature-libs/cart/saved-cart/styles/_saved-cart-list.scss

@@ -149,6 +149,15 @@ cx-saved-cart-list {
         font-weight: $font-weight-normal;
       }
     }
+
+    @include cx-highContrastTheme {
+      @include forFeature('a11yHighContrastBorders') {
+        border-color: var(--cx-color-dark);
+        tr {
+          border-bottom-color: var(--cx-color-dark);
+        }
+      }
+    }
   }
 
   .cx-saved-cart-list-no-saved-carts {

feature-libs/checkout/base/components/checkout-review/checkout-review-payment/checkout-review-payment.component.ts

@@ -9,10 +9,14 @@ import {
   CheckoutPaymentFacade,
   CheckoutStepType,
 } from '@spartacus/checkout/base/root';
-import { PaymentDetails, TranslationService } from '@spartacus/core';
+import {
+  PaymentDetails,
+  TranslationService,
+  useFeatureStyles,
+} from '@spartacus/core';
 import { billingAddressCard, paymentMethodCard } from '@spartacus/order/root';
 import { Card, ICON_TYPE } from '@spartacus/storefront';
-import { combineLatest, Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { CheckoutStepService } from '../../services/checkout-step.service';
 
@@ -32,7 +36,9 @@ export class CheckoutReviewPaymentComponent {
     protected checkoutStepService: CheckoutStepService,
     protected checkoutPaymentFacade: CheckoutPaymentFacade,
     protected translationService: TranslationService
-  ) {}
+  ) {
+    useFeatureStyles('a11yHighContrastBorders');
+  }
 
   paymentDetails$: Observable<PaymentDetails | undefined> =
     this.checkoutPaymentFacade.getPaymentDetailsState().pipe(

feature-libs/checkout/base/styles/components/steps/review/_review.scss

@@ -152,6 +152,9 @@
     background-color: var(--cx-color-background);
     .cx-review-summary-payment-card {
       background-color: var(--cx-color-background);
+      @include forFeature('a11yHighContrastBorders') {
+        border-color: var(--cx-color-dark);
+      }
     }
     .cx-review-summary {
       background-color: var(--cx-color-background);

feature-libs/customer-ticketing/components/list/customer-ticketing-list/customer-ticketing-list.component.ts

@@ -5,7 +5,11 @@
  */
 
 import { Component } from '@angular/core';
-import { RoutingService, TranslationService } from '@spartacus/core';
+import {
+  RoutingService,
+  TranslationService,
+  useFeatureStyles,
+} from '@spartacus/core';
 import {
   CustomerTicketingConfig,
   CustomerTicketingFacade,
@@ -14,7 +18,7 @@ import {
   TicketList,
 } from '@spartacus/customer-ticketing/root';
 import { ICON_TYPE } from '@spartacus/storefront';
-import { combineLatest, Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 @Component({
@@ -27,7 +31,9 @@ export class CustomerTicketingListComponent {
     protected routingService: RoutingService,
     protected translationService: TranslationService,
     protected customerTicketingConfig: CustomerTicketingConfig
-  ) {}
+  ) {
+    useFeatureStyles('a11yHighContrastBorders');
+  }
   PAGE_SIZE =
     this.customerTicketingConfig.customerTicketing?.listViewPageSize || 5;
   sortType: string;

feature-libs/customer-ticketing/styles/components/_customer-ticketing-list.scss

@@ -69,6 +69,15 @@
         }
       }
     }
+
+    @include cx-highContrastTheme {
+      @include forFeature('a11yHighContrastBorders') {
+        border-top-color: var(--cx-color-dark);
+        tr {
+          border-bottom-color: var(--cx-color-dark);
+        }
+      }
+    }
   }
 
   .cx-ticketing-list-thead-mobile {

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -815,6 +815,13 @@ export interface FeatureTogglesInterface {
    */
   a11yHideConsentButtonWhenBannerVisible?: boolean;
 
+  /**
+   * Ensures that borders across all UI elements are visible and meet accessibility standards in high-contrast dark and light themes.
+   * This change is applied globally to enhance usability for users relying on high-contrast modes.
+   * Affects: CustomerTickingListComponent, CheckoutReviewPaymentComponent, SavedCartListComponent
+   */
+  a11yHighContrastBorders?: boolean;
+
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -1078,6 +1085,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yFocusOnCardAfterSelecting: false,
   a11ySearchableDropdownFirstElementFocus: false,
   a11yHideConsentButtonWhenBannerVisible: false,
+  a11yHighContrastBorders: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
   useSiteThemeService: false,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -419,6 +419,7 @@ if (environment.cpq) {
         a11yFocusOnCardAfterSelecting: true,
         a11ySearchableDropdownFirstElementFocus: true,
         a11yHideConsentButtonWhenBannerVisible: true,
+        a11yHighContrastBorders: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: true,
         enableConsecutiveCharactersPasswordRequirement: true,