From 6452a028fe4c5b9f0da5993cebad80c817d84854 Mon Sep 17 00:00:00 2001 From: Petar Markov Date: Wed, 18 Dec 2024 12:01:10 +0100 Subject: [PATCH] update borders in high-contrast theme --- .../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 | 3 ++- 8 files changed, 50 insertions(+), 7 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 66da88c002f..e2df4a21b53 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 2d8be95098b..50e4acbb0ae 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 3e493cce207..ff3c9aacbbe 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 1e84b0809c9..3d0fe2254e6 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 @@ -798,6 +798,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. @@ -1057,6 +1064,7 @@ export const defaultFeatureToggles: Required = { a11yKeyboardFocusInSearchBox: false, a11yAddPaddingToCarouselPanel: 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 d3a25fcaf11..2d8bdad1e9a 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -416,8 +416,9 @@ if (environment.cpq) { a11yKeyboardFocusInSearchBox: true, a11yAddPaddingToCarouselPanel: true, a11yHideConsentButtonWhenBannerVisible: true, + a11yHighContrastBorders: true, cmsBottomHeaderSlotUsingFlexStyles: true, - useSiteThemeService: false, + useSiteThemeService: true, enableConsecutiveCharactersPasswordRequirement: true, enablePasswordsCannotMatchInPasswordUpdateForm: true, allPageMetaResolversEnabledInCsr: true,