From 97fc3febd3bd0cbb4790af21e8c04a7bf7fdced4 Mon Sep 17 00:00:00 2001 From: petarmarkov9449 <166535589+petarmarkov9449@users.noreply.github.com> Date: Thu, 9 Jan 2025 13:06:36 +0100 Subject: [PATCH 1/4] fix: (CXSPA-9050) - Fix borders in high-contrast dark and light themes. (#19789) Co-authored-by: Caine Rotherham --- .../components/list/saved-cart-list.component.ts | 1 + .../cart/saved-cart/styles/_saved-cart-list.scss | 9 +++++++++ .../checkout-review-payment.component.ts | 12 +++++++++--- .../base/styles/components/steps/review/_review.scss | 3 +++ .../customer-ticketing-list.component.ts | 12 +++++++++--- .../styles/components/_customer-ticketing-list.scss | 9 +++++++++ .../feature-toggles/config/feature-toggles.ts | 8 ++++++++ .../src/app/spartacus/spartacus-features.module.ts | 1 + 8 files changed, 49 insertions(+), 6 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 index 70c463aec55..e7a9671ccc7 100644 --- 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 index e1dddeeacda..f397f0cb08a 100644 --- 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/feature-libs/checkout/base/components/checkout-review/checkout-review-payment/checkout-review-payment.component.ts b/feature-libs/checkout/base/components/checkout-review/checkout-review-payment/checkout-review-payment.component.ts index d48fa5f51cd..5289b2ca582 100644 --- a/feature-libs/checkout/base/components/checkout-review/checkout-review-payment/checkout-review-payment.component.ts +++ b/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 = 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 index f0ff3d5e6bf..c3b1fe39cdf 100644 --- 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/feature-libs/customer-ticketing/components/list/customer-ticketing-list/customer-ticketing-list.component.ts b/feature-libs/customer-ticketing/components/list/customer-ticketing-list/customer-ticketing-list.component.ts index e29f203d752..10f4b1acb43 100644 --- a/feature-libs/customer-ticketing/components/list/customer-ticketing-list/customer-ticketing-list.component.ts +++ b/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; diff --git a/feature-libs/customer-ticketing/styles/components/_customer-ticketing-list.scss b/feature-libs/customer-ticketing/styles/components/_customer-ticketing-list.scss index 3464bf472ba..87c6e08c7ac 100644 --- 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/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts index 9da98edab28..f21d7e1f097 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 @@ -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 = { a11yFocusOnCardAfterSelecting: false, a11ySearchableDropdownFirstElementFocus: false, a11yHideConsentButtonWhenBannerVisible: false, + a11yHighContrastBorders: false, occCartNameAndDescriptionInHttpRequestBody: false, cmsBottomHeaderSlotUsingFlexStyles: false, useSiteThemeService: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 583673b4356..af5c234d5f4 100644 --- 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, From 88117ea1ff1f65f9413dbe9d2a47f17beff78f8d Mon Sep 17 00:00:00 2001 From: petarmarkov9449 <166535589+petarmarkov9449@users.noreply.github.com> Date: Thu, 9 Jan 2025 13:45:22 +0100 Subject: [PATCH 2/4] fix: (CXSPA-9047) - Updates the background and color of input fields in AccountSummaryDocumentFilterComponent (#19794) --- .../components/_cx-account-summary-document-filter.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/feature-libs/organization/account-summary/styles/components/_cx-account-summary-document-filter.scss b/feature-libs/organization/account-summary/styles/components/_cx-account-summary-document-filter.scss index ba7853466a3..9b2151b1705 100644 --- a/feature-libs/organization/account-summary/styles/components/_cx-account-summary-document-filter.scss +++ b/feature-libs/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 { From f16704a26be16195d114ee7a03bdbfee79b38eab Mon Sep 17 00:00:00 2001 From: Florent Letendre Date: Thu, 9 Jan 2025 10:28:39 -0500 Subject: [PATCH 3/4] test: comment-out check failing on cx 2211.32 (#19832) CXSPA-9183 Temporary solution until all CI servers upgrade --- .../b2b-user-registration-e2e.cy.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/user-registration/b2b-user-registration-e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/user-registration/b2b-user-registration-e2e.cy.ts index 8fa69ef853e..17ceb8a6d9d 100644 --- a/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/user-registration/b2b-user-registration-e2e.cy.ts +++ b/projects/storefrontapp-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.' + // ); }); }); }); From f2ce01652f435e3bb1887adc8463472244a36339 Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Fri, 10 Jan 2025 11:10:51 +0100 Subject: [PATCH 4/4] fix: (CXSPA-9045) Button_ Contrast issue in high contrast themes for Focus. (#19846) --- .../storefrontstyles/scss/cxbase/blocks/buttons.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss b/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss index 7dc1fe1fef3..27e9fbecb97 100644 --- 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; + } + } +}