fix: (CXSPA-9041) Popover directive HCT contrast (#19835)

SAP · Jan 10, 2025 · bf10fab · bf10fab
1 parent f2ce016
commit bf10fab
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
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
@@ -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<FeatureTogglesInterface> = {
   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
@@ -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
@@ -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
@@ -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);
+      }
+    }
+  }
 }