From 51603e84838bd5d971feb24eda2328f74dded5f1 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 26 Aug 2026 13:40:24 +0100
Subject: [PATCH 1/3] Make `customData` available to interactive atoms

---
 dotcom-rendering/src/components/InteractiveAtom.tsx       | 3 +++
 dotcom-rendering/src/components/InteractiveLayoutAtom.tsx | 3 +++
 dotcom-rendering/src/frontend/schemas/feArticle.json      | 3 +++
 dotcom-rendering/src/lib/renderElement.tsx                | 2 ++
 dotcom-rendering/src/model/block-schema.json              | 3 +++
 dotcom-rendering/src/types/content.ts                     | 1 +
 6 files changed, 15 insertions(+)

diff --git a/dotcom-rendering/src/components/InteractiveAtom.tsx b/dotcom-rendering/src/components/InteractiveAtom.tsx
index 6dc0069f206..65d8c280435 100644
--- a/dotcom-rendering/src/components/InteractiveAtom.tsx
+++ b/dotcom-rendering/src/components/InteractiveAtom.tsx
@@ -34,6 +34,7 @@ type InteractiveAtomType = {
 	elementCss?: string;
 	isMainMedia?: boolean;
 	title: string;
+	customData?: string;
 };
 
 export const InteractiveAtom = ({
@@ -43,6 +44,7 @@ export const InteractiveAtom = ({
 	elementCss,
 	isMainMedia,
 	title,
+	customData,
 }: InteractiveAtomType) => {
 	const { renderingTarget } = useConfig();
 
@@ -51,6 +53,7 @@ export const InteractiveAtom = ({
 			css={[containerStyles, !!isMainMedia && fullHeightStyles]}
 			data-atom-id={id}
 			data-atom-type="interactive"
+			{...(customData ? { 'data-atom-custom-data': customData } : {})}
 		>
 			<Island
 				priority="feature"
diff --git a/dotcom-rendering/src/components/InteractiveLayoutAtom.tsx b/dotcom-rendering/src/components/InteractiveLayoutAtom.tsx
index 08d3a77b153..c79aebf5df1 100644
--- a/dotcom-rendering/src/components/InteractiveLayoutAtom.tsx
+++ b/dotcom-rendering/src/components/InteractiveLayoutAtom.tsx
@@ -10,6 +10,7 @@ export type InteractiveLayoutAtomType = {
 	elementHtml?: string;
 	elementJs?: string;
 	elementCss?: string;
+	customData?: string;
 };
 
 export const InteractiveLayoutAtom = ({
@@ -17,12 +18,14 @@ export const InteractiveLayoutAtom = ({
 	elementHtml,
 	elementJs,
 	elementCss,
+	customData,
 }: InteractiveLayoutAtomType) => (
 	<div
 		className="interactive interactive-atom"
 		css={containerStyles}
 		data-atom-id={id}
 		data-atom-type="interactive-layout"
+		{...(customData ? { 'data-atom-custom-data': customData } : {})}
 	>
 		{!!elementCss && (
 			<style
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index 0fe237e54b9..a0277d63f41 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -2522,6 +2522,9 @@
                         "thumbnail"
                     ],
                     "type": "string"
+                },
+                "customData": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index 68bb7b4f231..03bce653d23 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -436,6 +436,7 @@ export const renderElement = ({
 						elementHtml={element.html}
 						elementJs={element.js}
 						elementCss={element.css}
+						customData={element.customData}
 					/>
 				);
 			}
@@ -447,6 +448,7 @@ export const renderElement = ({
 					elementJs={element.js}
 					elementCss={element.css}
 					title={element.title}
+					customData={element.customData}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.InteractiveBlockElement': {
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 598c2c95945..e4dedc3388f 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -1999,6 +1999,9 @@
                         "thumbnail"
                     ],
                     "type": "string"
+                },
+                "customData": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 82b5071d93e..f6c143edb9e 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -347,6 +347,7 @@ export interface InteractiveAtomBlockElement {
 	css?: string;
 	placeholderUrl?: string;
 	role?: RoleType | 'fullWidth';
+	customData?: string;
 }
 
 // Can't guarantee anything in interactiveBlockElement :shrug:

From 6642414f4879251c4b40e06a11f9bc6cf2c6f7c8 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 3 Sep 2026 10:04:41 +0100
Subject: [PATCH 2/3] Add tests

---
 .../src/lib/interactiveAtoms.test.tsx         | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 dotcom-rendering/src/lib/interactiveAtoms.test.tsx

diff --git a/dotcom-rendering/src/lib/interactiveAtoms.test.tsx b/dotcom-rendering/src/lib/interactiveAtoms.test.tsx
new file mode 100644
index 00000000000..961c61268dc
--- /dev/null
+++ b/dotcom-rendering/src/lib/interactiveAtoms.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import { ConfigProvider } from '../components/ConfigContext';
+import { InteractiveAtom } from '../components/InteractiveAtom';
+import { InteractiveLayoutAtom } from '../components/InteractiveLayoutAtom';
+
+const mockCustomData = JSON.stringify({ key: 'value' });
+
+describe('Interactive atom custom data attributes', () => {
+	it('should add custom data attribute to InteractiveAtom', () => {
+		const { container } = render(
+			<ConfigProvider
+				value={{
+					renderingTarget: 'Apps',
+					darkModeAvailable: true,
+					assetOrigin: '/',
+					editionId: 'UK',
+				}}
+			>
+				<InteractiveAtom
+					id="test-id"
+					title="Test Title"
+					customData={mockCustomData}
+				/>
+			</ConfigProvider>,
+		);
+		const el = container.querySelector(
+			`[data-atom-custom-data='${mockCustomData}']`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+
+	it('should add custom data attribute to InteractiveLayoutAtom', () => {
+		const { container } = render(
+			<InteractiveLayoutAtom id="test-id" customData={mockCustomData} />,
+		);
+		const el = container.querySelector(
+			`[data-atom-custom-data='${mockCustomData}']`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+});

From 6bab1afda18b5ba14951366e8fe3877254bdcdc2 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 3 Sep 2026 11:14:51 +0100
Subject: [PATCH 3/3] Add web test case

---
 .../src/lib/interactiveAtoms.test.tsx         | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/lib/interactiveAtoms.test.tsx b/dotcom-rendering/src/lib/interactiveAtoms.test.tsx
index 961c61268dc..ac068bd0a65 100644
--- a/dotcom-rendering/src/lib/interactiveAtoms.test.tsx
+++ b/dotcom-rendering/src/lib/interactiveAtoms.test.tsx
@@ -6,7 +6,30 @@ import { InteractiveLayoutAtom } from '../components/InteractiveLayoutAtom';
 const mockCustomData = JSON.stringify({ key: 'value' });
 
 describe('Interactive atom custom data attributes', () => {
-	it('should add custom data attribute to InteractiveAtom', () => {
+	it('should add custom data attribute to InteractiveAtom on web', () => {
+		const { container } = render(
+			<ConfigProvider
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: true,
+					assetOrigin: '/',
+					editionId: 'UK',
+				}}
+			>
+				<InteractiveAtom
+					id="test-id"
+					title="Test Title"
+					customData={mockCustomData}
+				/>
+			</ConfigProvider>,
+		);
+		const el = container.querySelector(
+			`[data-atom-custom-data='${mockCustomData}']`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+
+	it('should add custom data attribute to InteractiveAtom on apps', () => {
 		const { container } = render(
 			<ConfigProvider
 				value={{