From c8e3a2ac6600528d50b10dc2dced63c55e757083 Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Tue, 7 Jan 2025 13:33:47 +0100 Subject: [PATCH 1/3] fix: (CXSPA-9041) Popover directive HCT contrast * fixed a contrast of a contend displayed in popover when HCT is applied; * closes https://jira.tools.sap/browse/CXSPA-9041 --- .../feature-toggles/config/feature-toggles.ts | 6 ++++++ .../src/app/spartacus/spartacus-features.module.ts | 3 ++- .../shared/components/popover/popover.directive.ts | 9 ++++++++- .../scss/components/misc/popover/_popover.scss | 10 ++++++++++ 4 files changed, 26 insertions(+), 2 deletions(-) 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 b6d8bfd742e..b0376a22b90 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 @@ -211,6 +211,11 @@ export interface FeatureTogglesInterface { */ a11yPopoverFocus?: boolean; + /** + * Fix popover appearance when a High Contrast Theme is applied. + */ + a11yPopoverHighContrast?: boolean; + /** * Adds Datepicker and Combobox label and corrects heading order for 'CheckoutScheduleReplenishmentOrderComponent'. */ @@ -965,6 +970,7 @@ export const defaultFeatureToggles: Required = { a11yPreventHorizontalScroll: false, a11yReorderDialog: true, a11yPopoverFocus: true, + a11yPopoverHighContrast: false, a11yScheduleReplenishment: true, a11yScrollToTop: true, a11ySavedCartsZoom: true, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 54eb0f2eb7e..a0a04571398 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -317,6 +317,7 @@ if (environment.cpq) { a11yPreventHorizontalScroll: true, a11yReorderDialog: true, a11yPopoverFocus: true, + a11yPopoverHighContrast: true, a11yScheduleReplenishment: true, a11yScrollToTop: true, a11ySavedCartsZoom: true, @@ -418,7 +419,7 @@ if (environment.cpq) { a11yAddPaddingToCarouselPanel: true, a11yHideConsentButtonWhenBannerVisible: true, cmsBottomHeaderSlotUsingFlexStyles: true, - useSiteThemeService: false, + useSiteThemeService: true, enableConsecutiveCharactersPasswordRequirement: true, enablePasswordsCannotMatchInPasswordUpdateForm: true, allPageMetaResolversEnabledInCsr: true, diff --git a/projects/storefrontlib/shared/components/popover/popover.directive.ts b/projects/storefrontlib/shared/components/popover/popover.directive.ts index 256660049d5..d10528eab74 100644 --- a/projects/storefrontlib/shared/components/popover/popover.directive.ts +++ b/projects/storefrontlib/shared/components/popover/popover.directive.ts @@ -225,8 +225,15 @@ export class PopoverDirective implements OnInit { this.cxPopoverOptions?.autoPositioning; if (this.cxPopoverOptions?.appendToBody) { + const element = this.featureConfigService?.isEnabled( + 'a11yPopoverHighContrast' + ) + ? // we need to select first child element, + // otherwise HCT theming isn't getting picked up. + this.winRef.document.body.firstElementChild + : this.winRef.document.body; this.renderer.appendChild( - this.winRef.document.body, + element, this.popoverContainer.location.nativeElement ); } diff --git a/projects/storefrontstyles/scss/components/misc/popover/_popover.scss b/projects/storefrontstyles/scss/components/misc/popover/_popover.scss index 7098be1208e..4708af828ac 100644 --- a/projects/storefrontstyles/scss/components/misc/popover/_popover.scss +++ b/projects/storefrontstyles/scss/components/misc/popover/_popover.scss @@ -209,4 +209,14 @@ font-size: 1rem; } } + + @include cx-highContrastTheme { + background-color: var(--cx-color-background); + box-shadow: none; + .popover-body > .cx-close-row { + .close { + color: var(--cx-color-text); + } + } + } } From bf0df301ae6f3c32f86c6310ef13dd0bc1cc1fc0 Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Tue, 7 Jan 2025 13:37:07 +0100 Subject: [PATCH 2/3] fix: (CXSPA-9041) Popover directive HCT contrast * fixed a contrast of a contend displayed in popover when HCT is applied; * closes https://jira.tools.sap/browse/CXSPA-9041 --- .../src/app/spartacus/spartacus-features.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index a0a04571398..f12511d7081 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -419,7 +419,7 @@ if (environment.cpq) { a11yAddPaddingToCarouselPanel: true, a11yHideConsentButtonWhenBannerVisible: true, cmsBottomHeaderSlotUsingFlexStyles: true, - useSiteThemeService: true, + useSiteThemeService: false, enableConsecutiveCharactersPasswordRequirement: true, enablePasswordsCannotMatchInPasswordUpdateForm: true, allPageMetaResolversEnabledInCsr: true, From db8a24b208d272ffed6065e57b96392107cd705f Mon Sep 17 00:00:00 2001 From: Stanislav Sukhanov Date: Thu, 9 Jan 2025 09:12:17 +0100 Subject: [PATCH 3/3] fix: (CXSPA-9041) Popover directive HCT contrast * fixed a contrast of a contend displayed in popover when HCT is applied; * closes https://jira.tools.sap/browse/CXSPA-9041 --- .../shared/components/popover/popover.directive.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/storefrontlib/shared/components/popover/popover.directive.ts b/projects/storefrontlib/shared/components/popover/popover.directive.ts index d10528eab74..c5d32d5402c 100644 --- a/projects/storefrontlib/shared/components/popover/popover.directive.ts +++ b/projects/storefrontlib/shared/components/popover/popover.directive.ts @@ -225,13 +225,14 @@ export class PopoverDirective implements OnInit { this.cxPopoverOptions?.autoPositioning; if (this.cxPopoverOptions?.appendToBody) { + const body = this.winRef.document.body; const element = this.featureConfigService?.isEnabled( 'a11yPopoverHighContrast' ) - ? // we need to select first child element, - // otherwise HCT theming isn't getting picked up. - this.winRef.document.body.firstElementChild - : this.winRef.document.body; + ? // we need to select first child element if exists, + // otherwise HCT theming in popover will not be picked up. + (body.firstElementChild ?? body) + : body; this.renderer.appendChild( element, this.popoverContainer.location.nativeElement