ElectionTracker link description

dotcom-rendering/fixtures/manual/electionTrackers/euParliament.ts

@@ -144,6 +144,8 @@ export const euParliament: ElectionComponentsJson = {
 			props: {
 				text: 'See full results',
 				link: 'https://www.theguardian.com',
+				description:
+					'Full live results from the European parliament elections 2024',
 			},
 		},
 	],

dotcom-rendering/fixtures/manual/electionTrackers/ukGeneralExitPoll.ts

@@ -37,6 +37,7 @@ export const ukGeneralExitPoll: ElectionComponentsJson = {
 			props: {
 				text: 'View results page',
 				link: 'https://www.theguardian.com',
+				description: 'UK general election results 2024: live tracker',
 			},
 		},
 	],

dotcom-rendering/fixtures/manual/electionTrackers/ukGeneralFinal.ts

@@ -94,6 +94,7 @@ export const ukGeneralFinal: ElectionComponentsJson = {
 			props: {
 				text: 'See full results',
 				link: 'https://www.theguardian.com',
+				description: 'UK general election results 2024: live tracker',
 			},
 		},
 	],

dotcom-rendering/fixtures/manual/electionTrackers/ukLocal.ts

@@ -53,6 +53,7 @@ export const ukLocal: ElectionComponentsJson = {
 			props: {
 				text: 'See full results',
 				link: 'https://www.theguardian.com',
+				description: 'Full local council results for England 2024',
 			},
 		},
 	],

dotcom-rendering/fixtures/manual/electionTrackers/usCongressEmpty.ts

@@ -197,6 +197,8 @@ export const usCongressEmpty: ElectionComponentsJson = {
 			props: {
 				text: 'Full results',
 				link: 'https://www.theguardian.com',
+				description:
+					'Full US Senate, House and governor election results',
 			},
 		},
 	],

dotcom-rendering/fixtures/manual/electionTrackers/usPresidential.ts

@@ -71,6 +71,7 @@ export const usPresidential: ElectionComponentsJson = {
 			props: {
 				text: 'Full US election results',
 				link: 'https://www.theguardian.com',
+				description: 'US election results 2024: live tracker',
 			},
 		},
 	],

dotcom-rendering/src/components/ElectionTrackers/ElectionTracker.tsx

@@ -121,6 +121,7 @@ const Component = ({ component }: { component: ElectionComponent }) => {
 				<OnwardLink
 					link={component.props.link}
 					text={component.props.text}
+					description={component.props.description}
 				/>
 			);
 		case 'progressNumber':

dotcom-rendering/src/components/ElectionTrackers/OnwardLink.stories.tsx

@@ -18,5 +18,6 @@ export const OnwardLink = meta.story({
 	args: {
 		link: new URL('https://www.theguardian.com'),
 		text: 'Full results',
+		description: 'Description of the results page',
 	},
 });

dotcom-rendering/src/components/ElectionTrackers/OnwardLink.tsx

@@ -9,6 +9,7 @@ import { palette } from '../../palette';
 type Props = {
 	link: URL;
 	text: string;
+	description: string;
 };
 
 /**
@@ -35,6 +36,7 @@ export const OnwardLink = (props: Props) => (
 			},
 		})}
 		href={props.link.href}
+		title={props.description}
 	>
 		{props.text}
 	</LinkButton>

dotcom-rendering/src/components/ElectionTrackers/USCongress.stories.tsx

@@ -81,6 +81,7 @@ export const Empty = meta.story({
 		},
 		link: new URL('https://www.theguardian.com'),
 		linkText: 'Full results',
+		linkDescription: 'Full US Senate, House and governor election results',
 	},
 	async play({ args, canvasElement }) {
 		const canvas = within(canvasElement);

dotcom-rendering/src/components/ElectionTrackers/USCongress.tsx

@@ -23,6 +23,11 @@ type Props = {
 	 * Onward link to the full results page.
 	 */
 	link: URL;
+	/**
+	 * Description of the results page the onward link is pointing to. For
+	 * example: "US election results 2024: live tracker".
+	 */
+	linkDescription: string;
 };
 
 /**
@@ -44,6 +49,10 @@ export const USCongress = (props: Props) => (
 				children: <USHouse {...props.house} />,
 			}}
 		/>
-		<OnwardLink link={props.link} text={props.linkText} />
+		<OnwardLink
+			link={props.link}
+			text={props.linkText}
+			description={props.linkDescription}
+		/>
 	</>
 );

dotcom-rendering/src/components/ElectionTrackers/electionComponent.ts

@@ -38,6 +38,7 @@ const OnwardLink = v.object({
 		v.transform((l) => new URL(l)),
 	),
 	text: v.string(),
+	description: v.string(),
 });
 
 const ProgressNumber = v.object({