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 f21d7e1f097..29c0075021f 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'. */ @@ -984,6 +989,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 af5c234d5f4..f9a02531c6c 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, diff --git a/projects/storefrontlib/shared/components/popover/popover.directive.ts b/projects/storefrontlib/shared/components/popover/popover.directive.ts index 256660049d5..c5d32d5402c 100644 --- a/projects/storefrontlib/shared/components/popover/popover.directive.ts +++ b/projects/storefrontlib/shared/components/popover/popover.directive.ts @@ -225,8 +225,16 @@ 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 if exists, + // otherwise HCT theming in popover will not be picked up. + (body.firstElementChild ?? body) + : 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); + } + } + } }