Add privacyPolicyNewWindow boolean in config for a11y

Author: jmpp

README.md

@@ -82,6 +82,10 @@ var orejimeConfig = {
   // You must provide a link to your privacy policy page for GDPR compliance.
   privacyPolicyUrl: '',
 
+  // [optional]
+  // Opens the privacy policy link in a new window (target="_blank" and rel="noopener noreferrer").
+  privacyPolicyNewWindow: false,
+
   // The list of third-party purposes that Orejime will manage for you.
   // The purposes will appear in the modal in the same order as defined here.
   purposes: [

src/ui/components/ContextualNoticeContainer.tsx

@@ -47,6 +47,7 @@ const ContextualNoticeContainer = ({
 					purpose={purpose}
 					data={data}
 					privacyPolicyUrl={config.privacyPolicyUrl}
+					privacyPolicyNewWindow={config.privacyPolicyNewWindow}
 					onAccept={() => {
 						manager.setConsent(purpose.id, true);
 						setIsBeingDisabled(true);

src/ui/components/Main.tsx

@@ -52,6 +52,7 @@ const Main = ({apiRef}: MainProps) => {
 						needsUpdate={manager.needsUpdate()}
 						purposeTitles={config.purposes.map(({title}) => title)}
 						privacyPolicyUrl={config.privacyPolicyUrl}
+						privacyPolicyNewWindow={config.privacyPolicyNewWindow}
 						logo={config.logo}
 						onConfigure={openModal}
 						onAccept={() => {
@@ -74,6 +75,7 @@ const Main = ({apiRef}: MainProps) => {
 							isForced={config.forceModal && manager.isDirty()}
 							needsUpdate={manager.needsUpdate()}
 							privacyPolicyUrl={config.privacyPolicyUrl}
+							privacyPolicyNewWindow={config.privacyPolicyNewWindow}
 							onClose={closeModal}
 							onSave={commit}
 						>

src/ui/components/types/Banner.ts

@@ -6,6 +6,7 @@ export interface BannerProps {
 	needsUpdate: boolean;
 	purposeTitles: string[];
 	privacyPolicyUrl: string;
+	privacyPolicyNewWindow?: boolean;
 	logo?: ImageDescriptor;
 	onAccept: () => void;
 	onDecline: () => void;

src/ui/components/types/ContextualNotice.ts

@@ -9,6 +9,7 @@ export interface ContextualNoticeProps<Data extends ContextualNoticeOptions> {
 	purpose: Purpose;
 	data: Data;
 	privacyPolicyUrl: string;
+	privacyPolicyNewWindow?: boolean;
 	onAccept: () => void;
 }
 

src/ui/components/types/Modal.ts

@@ -4,6 +4,7 @@ export interface ModalProps {
 	isForced: boolean;
 	needsUpdate: boolean;
 	privacyPolicyUrl: string;
+	privacyPolicyNewWindow?: boolean;
 	onClose: () => void;
 	onSave: () => void;
 	children: ComponentChildren;

src/ui/themes/dsfr/Banner.tsx

@@ -8,6 +8,7 @@ const Banner: BannerComponent = ({
 	isHidden,
 	purposeTitles,
 	privacyPolicyUrl,
+	privacyPolicyNewWindow,
 	onAccept,
 	onDecline,
 	onConfigure
@@ -28,7 +29,17 @@ const Banner: BannerComponent = ({
 							<strong key="purposes">{purposeTitles.join(', ')}</strong>
 						),
 						privacyPolicy: (
-							<a key="privacyPolicyUrl" href={privacyPolicyUrl}>
+							<a
+								key="privacyPolicyUrl"
+								href={privacyPolicyUrl}
+								{...(privacyPolicyNewWindow
+								? {
+										target: '_blank',
+										rel: 'noopener noreferrer',
+										title: t.misc.newWindowTitle
+									}
+									: {})}
+							>
 								{t.banner.privacyPolicyLabel}
 							</a>
 						)

src/ui/themes/dsfr/Modal.tsx

@@ -8,6 +8,7 @@ const Modal: ModalComponent = ({
 	isForced,
 	needsUpdate,
 	privacyPolicyUrl,
+	privacyPolicyNewWindow,
 	onClose,
 	onSave,
 	children
@@ -55,17 +56,24 @@ const Modal: ModalComponent = ({
 								) : null}
 
 								<p>
-									{template(t.modal.description, {
-										privacyPolicy: (
-											<a
-												key="privacyPolicyLink"
-												href={privacyPolicyUrl}
-												onClick={onClose}
-											>
-												{t.modal.privacyPolicyLabel}
-											</a>
-										)
-									})}
+								{template(t.modal.description, {
+									privacyPolicy: (
+										<a
+											key="privacyPolicyLink"
+											href={privacyPolicyUrl}
+											onClick={onClose}
+											{...(privacyPolicyNewWindow
+											? {
+													target: '_blank',
+													rel: 'noopener noreferrer',
+													title: t.misc.newWindowTitle
+												}
+												: {})}
+										>
+											{t.modal.privacyPolicyLabel}
+										</a>
+									)
+								})}
 								</p>
 							</div>
 

src/ui/themes/standard/Banner.tsx

@@ -9,6 +9,7 @@ const Banner: BannerComponent = ({
 	needsUpdate,
 	purposeTitles,
 	privacyPolicyUrl,
+	privacyPolicyNewWindow,
 	logo,
 	onAccept: onSaveRequest,
 	onDecline: onDeclineRequest,
@@ -61,6 +62,13 @@ const Banner: BannerComponent = ({
 									key="privacyPolicyLink"
 									className="orejime-Banner-privacyPolicyLink"
 									href={privacyPolicyUrl}
+									{...(privacyPolicyNewWindow
+										? {
+												target: '_blank',
+												rel: 'noopener noreferrer',
+												title: t.misc.newWindowTitle
+											}
+										: {})}
 								>
 									{t.banner.privacyPolicyLabel}
 								</a>

src/ui/themes/standard/ContextualNotice.tsx

@@ -9,7 +9,8 @@ const ContextualNotice: ContextualNoticeComponent = ({
 	purpose,
 	data,
 	onAccept,
-	privacyPolicyUrl
+	privacyPolicyUrl,
+	privacyPolicyNewWindow
 }) => {
 	const t = useTranslations();
 	const {titleLevel} = data;
@@ -18,7 +19,13 @@ const ContextualNotice: ContextualNoticeComponent = ({
 	const templateProps = {
 		purpose: purpose.title,
 		privacyPolicy: (
-			<a key="privacyPolicyUrl" href={privacyPolicyUrl}>
+			<a
+				key="privacyPolicyUrl"
+				href={privacyPolicyUrl}
+				{...(privacyPolicyNewWindow
+				? {target: '_blank', rel: 'noopener noreferrer', title: t.misc.newWindowTitle}
+				: {})}
+			>
 				{t.contextual.privacyPolicyLabel}
 			</a>
 		)