From 6df0fd2317e114094fb555b7c219f100f422c6ec Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 26 May 2026 10:30:21 +0100
Subject: [PATCH 1/2] Age warning data attribute and test

---
 dotcom-rendering/src/components/AgeWarning.tsx   |  7 ++++++-
 dotcom-rendering/src/lib/dataAttributes.test.tsx | 15 +++++++++++++++
 dotcom-rendering/src/lib/dataAttributes.ts       |  9 +++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 dotcom-rendering/src/lib/dataAttributes.test.tsx
 create mode 100644 dotcom-rendering/src/lib/dataAttributes.ts

diff --git a/dotcom-rendering/src/components/AgeWarning.tsx b/dotcom-rendering/src/components/AgeWarning.tsx
index 257c6f080f6..2c1acc353d0 100644
--- a/dotcom-rendering/src/components/AgeWarning.tsx
+++ b/dotcom-rendering/src/components/AgeWarning.tsx
@@ -5,6 +5,7 @@ import {
 	textSans17,
 	visuallyHidden,
 } from '@guardian/source/foundations';
+import { guDataAttribute } from '../lib/dataAttributes';
 import { palette } from '../palette';
 
 type Props = {
@@ -51,7 +52,11 @@ export const AgeWarning = ({ age, isScreenReader, size = 'medium' }: Props) => {
 	}
 
 	return (
-		<div css={ageWarningStyles(isSmall)} aria-hidden="true">
+		<div
+			css={ageWarningStyles(isSmall)}
+			aria-hidden="true"
+			{...guDataAttribute(guDataAttribute.ageWarning)}
+		>
 			<svg width="11" height="11" viewBox="0 0 11 11" fill="currentColor">
 				<path d="M5.4 0C2.4 0 0 2.4 0 5.4s2.4 5.4 5.4 5.4 5.4-2.4 5.4-5.4S8.4 0 5.4 0zm3 6.8H4.7V1.7h.7L6 5.4l2.4.6v.8z"></path>
 			</svg>{' '}
diff --git a/dotcom-rendering/src/lib/dataAttributes.test.tsx b/dotcom-rendering/src/lib/dataAttributes.test.tsx
new file mode 100644
index 00000000000..1ac3312890c
--- /dev/null
+++ b/dotcom-rendering/src/lib/dataAttributes.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { AgeWarning } from '../components/AgeWarning';
+import { guDataAttribute } from './dataAttributes';
+
+describe('Data Attributes', () => {
+	it('Article age warning element has a data-gu-name attribute', () => {
+		const { container } = render(
+			<AgeWarning age="3 years old" isScreenReader={false} />,
+		);
+		const el = container.querySelector(
+			`[data-gu-name="${guDataAttribute.ageWarning}"]`,
+		);
+		expect(el).toBeInTheDocument();
+	});
+});
diff --git a/dotcom-rendering/src/lib/dataAttributes.ts b/dotcom-rendering/src/lib/dataAttributes.ts
new file mode 100644
index 00000000000..3249df74311
--- /dev/null
+++ b/dotcom-rendering/src/lib/dataAttributes.ts
@@ -0,0 +1,9 @@
+const guNames = {
+	ageWarning: 'age-warning',
+} as const;
+
+type GuName = (typeof guNames)[keyof typeof guNames];
+
+const attribute = (name: GuName) => ({ 'data-gu-name': name });
+
+export const guDataAttribute = Object.assign(attribute, guNames);

From cf630f670d77746df6ec114c5477bc82b99047e0 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 27 May 2026 08:39:44 +0100
Subject: [PATCH 2/2] Keep it simple, stupid

---
 dotcom-rendering/src/components/AgeWarning.tsx   | 3 +--
 dotcom-rendering/src/lib/dataAttributes.test.tsx | 7 ++-----
 dotcom-rendering/src/lib/dataAttributes.ts       | 9 ---------
 3 files changed, 3 insertions(+), 16 deletions(-)
 delete mode 100644 dotcom-rendering/src/lib/dataAttributes.ts

diff --git a/dotcom-rendering/src/components/AgeWarning.tsx b/dotcom-rendering/src/components/AgeWarning.tsx
index 2c1acc353d0..b558045ea49 100644
--- a/dotcom-rendering/src/components/AgeWarning.tsx
+++ b/dotcom-rendering/src/components/AgeWarning.tsx
@@ -5,7 +5,6 @@ import {
 	textSans17,
 	visuallyHidden,
 } from '@guardian/source/foundations';
-import { guDataAttribute } from '../lib/dataAttributes';
 import { palette } from '../palette';
 
 type Props = {
@@ -55,7 +54,7 @@ export const AgeWarning = ({ age, isScreenReader, size = 'medium' }: Props) => {
 		<div
 			css={ageWarningStyles(isSmall)}
 			aria-hidden="true"
-			{...guDataAttribute(guDataAttribute.ageWarning)}
+			data-gu-name="age-warning"
 		>
 			<svg width="11" height="11" viewBox="0 0 11 11" fill="currentColor">
 				<path d="M5.4 0C2.4 0 0 2.4 0 5.4s2.4 5.4 5.4 5.4 5.4-2.4 5.4-5.4S8.4 0 5.4 0zm3 6.8H4.7V1.7h.7L6 5.4l2.4.6v.8z"></path>
diff --git a/dotcom-rendering/src/lib/dataAttributes.test.tsx b/dotcom-rendering/src/lib/dataAttributes.test.tsx
index 1ac3312890c..e80d9434b92 100644
--- a/dotcom-rendering/src/lib/dataAttributes.test.tsx
+++ b/dotcom-rendering/src/lib/dataAttributes.test.tsx
@@ -1,15 +1,12 @@
 import { render } from '@testing-library/react';
 import { AgeWarning } from '../components/AgeWarning';
-import { guDataAttribute } from './dataAttributes';
 
 describe('Data Attributes', () => {
-	it('Article age warning element has a data-gu-name attribute', () => {
+	it('Article age warning element has an "age-warning" data-gu-name attribute', () => {
 		const { container } = render(
 			<AgeWarning age="3 years old" isScreenReader={false} />,
 		);
-		const el = container.querySelector(
-			`[data-gu-name="${guDataAttribute.ageWarning}"]`,
-		);
+		const el = container.querySelector('[data-gu-name="age-warning"]');
 		expect(el).toBeInTheDocument();
 	});
 });
diff --git a/dotcom-rendering/src/lib/dataAttributes.ts b/dotcom-rendering/src/lib/dataAttributes.ts
deleted file mode 100644
index 3249df74311..00000000000
--- a/dotcom-rendering/src/lib/dataAttributes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-const guNames = {
-	ageWarning: 'age-warning',
-} as const;
-
-type GuName = (typeof guNames)[keyof typeof guNames];
-
-const attribute = (name: GuName) => ({ 'data-gu-name': name });
-
-export const guDataAttribute = Object.assign(attribute, guNames);