Prevent dismissal of banner and overlay (#4470)

CHANGELOG.md

@@ -29,6 +29,7 @@ The types of changes are:
 - Readonly consent management table and modal [#4456](https://github.com/ethyca/fides/pull/4456), [#4477](https://github.com/ethyca/fides/pull/4477)
 - Access and erasure support for Gong [#4461](https://github.com/ethyca/fides/pull/4461)
 - Add new UI for CSV consent reporting [#4488](https://github.com/ethyca/fides/pull/4488)
+- Option to prevent the dismissal of the consent banner and modal [#4470](https://github.com/ethyca/fides/pull/4470)
 
 ### Changed
 - Increased max number of preferences allowed in privacy preference API calls [#4469](https://github.com/ethyca/fides/pull/4469)

clients/fides-js/src/components/CloseButton.tsx

@@ -3,15 +3,18 @@ import { h } from "preact";
 const CloseButton = ({
   onClick,
   ariaLabel,
+  hidden = false,
 }: {
   onClick?: () => void;
   ariaLabel?: string;
+  hidden?: boolean;
 }) => (
   <button
     type="button"
     aria-label={ariaLabel}
     className="fides-close-button"
     onClick={onClick}
+    style={{ visibility: hidden ? "hidden" : "visible" }}
   >
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
       <path

clients/fides-js/src/components/ConsentBanner.tsx

@@ -1,5 +1,5 @@
 import { h, FunctionComponent, ComponentChildren, VNode } from "preact";
-import { useState, useEffect } from "preact/hooks";
+import { useState, useEffect, useRef } from "preact/hooks";
 import { getConsentContext } from "../lib/consent-context";
 import { ExperienceConfig } from "../lib/consent-types";
 import CloseButton from "./CloseButton";
@@ -35,6 +35,8 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   renderButtonGroup,
   className,
 }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
 
   useEffect(() => {
@@ -50,6 +52,34 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
     };
   }, []);
 
+  // add listeners for ESC and clicking outside of component
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (bannerIsOpen && !window.Fides.options.preventDismissal) {
+      window.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("keydown", handleEsc);
+    } else {
+      window.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("keydown", handleEsc);
+    }
+
+    return () => {
+      window.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("keydown", handleEsc);
+    };
+  }, [onClose, bannerIsOpen, ref]);
+
   const showGpcBadge = getConsentContext().globalPrivacyControl;
 
   useEffect(() => {
@@ -64,10 +94,15 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
       className={`fides-banner fides-banner-bottom 
         ${bannerIsOpen ? "" : "fides-banner-hidden"} 
         ${className || ""}`}
+      ref={ref}
     >
       <div id="fides-banner">
         <div id="fides-banner-inner">
-          <CloseButton ariaLabel="Close banner" onClick={onClose} />
+          <CloseButton
+            ariaLabel="Close banner"
+            onClick={onClose}
+            hidden={window.Fides.options.preventDismissal}
+          />
           <div
             id="fides-banner-inner-container"
             style={{

clients/fides-js/src/components/ConsentModal.tsx

@@ -34,7 +34,11 @@ const ConsentModal = ({
       >
         <div className="fides-modal-header">
           <div />
-          <CloseButton ariaLabel="Close modal" onClick={closeButton.onClick} />
+          <CloseButton
+            ariaLabel="Close modal"
+            onClick={closeButton.onClick}
+            hidden={window.Fides.options.preventDismissal}
+          />
         </div>
         <ConsentContent
           title={title}

clients/fides-js/src/components/Overlay.tsx

@@ -28,6 +28,7 @@ interface Props {
   experience: PrivacyExperience;
   cookie: FidesCookie;
   onOpen: () => void;
+  onDismiss: () => void;
   renderBanner: (props: RenderBannerProps) => VNode | null;
   renderModalContent: () => VNode;
   renderModalFooter: (props: RenderModalFooter) => VNode;
@@ -39,6 +40,7 @@ const Overlay: FunctionComponent<Props> = ({
   options,
   cookie,
   onOpen,
+  onDismiss,
   renderBanner,
   renderModalContent,
   renderModalFooter,
@@ -52,15 +54,23 @@ const Overlay: FunctionComponent<Props> = ({
   const dispatchCloseEvent = useCallback(
     ({ saved = false }: { saved?: boolean }) => {
       dispatchFidesEvent("FidesModalClosed", cookie, options.debug, { saved });
+      if (!saved) {
+        onDismiss();
+      }
     },
     [cookie, options.debug]
   );
 
   const { instance, attributes } = useA11yDialog({
     id: "fides-modal",
-    role: "alertdialog",
+    role: window.Fides.options.preventDismissal ? "alertdialog" : "dialog",
     title: experience?.experience_config?.title || "",
-    onClose: () => dispatchCloseEvent({ saved: false }),
+    onClose: () => {
+      dispatchCloseEvent({ saved: false });
+    },
+    onEsc: () => {
+      dispatchCloseEvent({ saved: false });
+    },
   });
 
   const handleOpenModal = useCallback(() => {
@@ -103,8 +113,8 @@ const Overlay: FunctionComponent<Props> = ({
         // Update modal link to trigger modal on click
         const modalLink = modalLinkEl;
         modalLink.onclick = () => {
-          handleOpenModal();
           setBannerIsOpen(false);
+          handleOpenModal();
         };
         // Update to show the pre-existing modal link in the DOM
         modalLink.classList.add("fides-modal-link-shown");
@@ -140,6 +150,9 @@ const Overlay: FunctionComponent<Props> = ({
 
   return (
     <div>
+      {bannerIsOpen && window.Fides.options.preventDismissal && (
+        <div className="fides-modal-overlay" />
+      )}
       {showBanner
         ? renderBanner({
             isOpen: bannerIsOpen,

clients/fides-js/src/components/notices/NoticeOverlay.tsx

@@ -134,6 +134,10 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
     });
   }, [cookie, options.debug]);
 
+  const handleDismiss = useCallback(() => {
+    handleUpdatePreferences(ConsentMethod.dismiss, initialEnabledNoticeKeys);
+  }, [handleUpdatePreferences, initialEnabledNoticeKeys]);
+
   if (!experience.experience_config) {
     debugLog(options.debug, "No experience config found");
     return null;
@@ -146,11 +150,15 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
       experience={experience}
       cookie={cookie}
       onOpen={dispatchOpenOverlayEvent}
+      onDismiss={handleDismiss}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => (
         <ConsentBanner
           bannerIsOpen={isOpen}
           onOpen={dispatchOpenBannerEvent}
-          onClose={onClose}
+          onClose={() => {
+            onClose();
+            handleDismiss();
+          }}
           experience={experienceConfig}
           renderButtonGroup={({ isMobile }) => (
             <NoticeConsentButtons

clients/fides-js/src/components/tcf/TcfOverlay.tsx

@@ -330,6 +330,10 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
     });
   }, [cookie, options.debug]);
 
+  const handleDismiss = useCallback(() => {
+    handleUpdateAllPreferences(ConsentMethod.dismiss, initialEnabledIds);
+  }, [handleUpdateAllPreferences, initialEnabledIds]);
+
   if (!experience.experience_config) {
     debugLog(options.debug, "No experience config found");
     return null;
@@ -345,6 +349,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
         setActiveTabIndex(2);
       }}
       onOpen={dispatchOpenOverlayEvent}
+      onDismiss={handleDismiss}
       renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => {
         const goToVendorTab = () => {
           onManagePreferencesClick();
@@ -354,7 +359,10 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
           <ConsentBanner
             bannerIsOpen={isOpen}
             onOpen={dispatchOpenBannerEvent}
-            onClose={onClose}
+            onClose={() => {
+              onClose();
+              handleDismiss();
+            }}
             experience={experienceConfig}
             onVendorPageClick={goToVendorTab}
             renderButtonGroup={({ isMobile }) => (

clients/fides-js/src/fides-tcf.ts

@@ -308,6 +308,7 @@ _Fides = {
     fidesTcfGdprApplies: true,
     gppExtensionPath: "",
     customOptionsPath: null,
+    preventDismissal: false,
   },
   fides_meta: {},
   identity: {},

clients/fides-js/src/fides.ts

@@ -198,6 +198,7 @@ _Fides = {
     fidesTcfGdprApplies: false,
     gppExtensionPath: "",
     customOptionsPath: null,
+    preventDismissal: false,
   },
   fides_meta: {},
   identity: {},

clients/fides-js/src/lib/a11y-dialog.tsx

@@ -6,7 +6,7 @@
 import A11yDialogLib from "a11y-dialog";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
-const useA11yDialogInstance = () => {
+const useA11yDialogInstance = (onEsc?: () => void) => {
   const [instance, setInstance] = useState<A11yDialogLib | null>(null);
   const container = useCallback((node: Element) => {
     if (node !== null) {
@@ -15,8 +15,19 @@ const useA11yDialogInstance = () => {
         .on("show", () => {
           document.documentElement.style.overflowY = "hidden";
         })
-        .on("hide", () => {
+        .on("hide", (_: Element, event?: Event) => {
           document.documentElement.style.overflowY = "";
+
+          // a11y-dialog natively supports dismissing a dialog by pressing ESC
+          // but it doesn't allow any custom functions to be associated
+          // with an ESC press, so we have to do this manually
+          if (
+            onEsc &&
+            event instanceof KeyboardEvent &&
+            event.key === "Escape"
+          ) {
+            onEsc();
+          }
         });
       setInstance(dialog);
     }
@@ -29,9 +40,10 @@ interface Props {
   id: string;
   title: string;
   onClose?: () => void;
+  onEsc?: () => void;
 }
-export const useA11yDialog = ({ role, id, onClose }: Props) => {
-  const { instance, container: ref } = useA11yDialogInstance();
+export const useA11yDialog = ({ role, id, onClose, onEsc }: Props) => {
+  const { instance, container: ref } = useA11yDialogInstance(onEsc);
   const isAlertDialog = role === "alertdialog";
   const titleId = `${id}-title`;
 

clients/fides-js/src/lib/consent-types.ts

@@ -93,6 +93,9 @@ export type FidesOptions = {
 
   // A custom path to fetch OverrideOptions (e.g. "window.config.overrides"). Defaults to window.fides_overrides
   customOptionsPath: string | null;
+
+  // Prevents the banner and modal from being dismissed
+  preventDismissal: boolean;
 };
 
 export type GetPreferencesFnResp = {

clients/privacy-center/app/server-environment.ts

@@ -55,6 +55,7 @@ export interface PrivacyCenterSettings {
   IS_FORCED_TCF: boolean; // whether to force the privacy center to use the fides-tcf.js bundle
   IS_GPP_ENABLED: boolean; // whether GPP is enabled
   GPP_EXTENSION_PATH: string; // The path of the GPP extension file `fides-ext-gpp.js`. Defaults to `/fides-ext-gpp.js`
+  PREVENT_DISMISSAL: boolean; // whether or not the user is allowed to dismiss the banner/overlay
 }
 
 /**
@@ -82,6 +83,7 @@ export type PrivacyCenterClientSettings = Pick<
   | "IS_FORCED_TCF"
   | "IS_GPP_ENABLED"
   | "GPP_EXTENSION_PATH"
+  | "PREVENT_DISMISSAL"
 >;
 
 export type Styles = string;
@@ -349,6 +351,9 @@ export const loadPrivacyCenterEnvironment =
       GPP_EXTENSION_PATH:
         process.env.FIDES_PRIVACY_CENTER__GPP_EXTENSION_PATH ||
         "/fides-ext-gpp.js",
+      PREVENT_DISMISSAL: process.env.FIDES_PRIVACY_CENTER__PREVENT_DISMISSAL
+        ? process.env.FIDES_PRIVACY_CENTER__PREVENT_DISMISSAL === "true"
+        : false,
     };
 
     // Load configuration file (if it exists)
@@ -378,6 +383,7 @@ export const loadPrivacyCenterEnvironment =
       IS_FORCED_TCF: settings.IS_FORCED_TCF,
       IS_GPP_ENABLED: settings.IS_GPP_ENABLED,
       GPP_EXTENSION_PATH: settings.GPP_EXTENSION_PATH,
+      PREVENT_DISMISSAL: settings.PREVENT_DISMISSAL,
     };
 
     // For backwards-compatibility, override FIDES_API_URL with the value from the config file if present