Merge branch 'develop' into feature/CXSPA-9192

SAP · Jan 10, 2025 · bb90dab · bb90dab
2 parents 86926ba + f2ce016
commit bb90dab
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 9 deletions.
diff --git a/feature-libs/cart/saved-cart/components/list/saved-cart-list.component.ts b/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 {

diff --git a/feature-libs/cart/saved-cart/styles/_saved-cart-list.scss b/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 {

diff --git a/...e/components/checkout-review/checkout-review-payment/checkout-review-payment.component.ts b/...e/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(

diff --git a/feature-libs/checkout/base/styles/components/steps/review/_review.scss b/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);

diff --git a/...er-ticketing/components/list/customer-ticketing-list/customer-ticketing-list.component.ts b/...er-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;

diff --git a/feature-libs/customer-ticketing/styles/components/_customer-ticketing-list.scss b/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 {

diff --git a/...s/organization/account-summary/styles/components/_cx-account-summary-document-filter.scss b/...s/organization/account-summary/styles/components/_cx-account-summary-document-filter.scss
@@ -32,6 +32,11 @@ cx-account-summary-document-filter {
     @include forFeature('a11yImproveContrast') {
       border-color: var(--cx-color-dark);
     }
+
+    @include cx-highContrastTheme {
+      background-color: var(--cx-color-background);
+      color: var(--color-text);
+    }
   }
 
   .cx-account-summary-document-filter-form-button-block {

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
@@ -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,

diff --git a/...-e2e-cypress/cypress/e2e/b2b/regression/user-registration/b2b-user-registration-e2e.cy.ts b/...-e2e-cypress/cypress/e2e/b2b/regression/user-registration/b2b-user-registration-e2e.cy.ts
@@ -81,9 +81,16 @@ context('B2B - User Registration', () => {
 
           fillOrganizationUserRegistrationForm(user);
           submitOrganizationUserRegistrationForm();
-          verifyGlobalMessageAfterRegistration(
-            'User with this e-mail address already exists.'
-          );
+
+          /*
+           * CXSPA-9183
+           * Leave below check commented until cx-server gets upgraded to 2211.32
+           * tbd after upgrade: POST orgUsers request should expect '201 created' response.
+           */
+
+          // verifyGlobalMessageAfterRegistration(
+          //   'User with this e-mail address already exists.'
+          // );
         });
       });
     });

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/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,

diff --git a/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss b/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss
@@ -337,3 +337,12 @@ button,
     @include visible-focus();
   }
 }
+
+// override opacity of bootstrap .close class
+button.close:not(:disabled):not(.disabled) {
+  @include forFeature('a11yImproveContrast') {
+    &:focus {
+      opacity: 1;
+    }
+  }
+}