From 9af466dc300abdf9c8131dae9ab28bf8dd45b020 Mon Sep 17 00:00:00 2001
From: Dominik Lander <dominik.lander@guardian.co.uk>
Date: Wed, 18 Feb 2026 15:53:22 +0000
Subject: [PATCH] Add carousel attributes to highlights container

---
 dotcom-rendering/src/components/Card/Card.tsx |  4 ++--
 .../ScrollableHighlights.importable.tsx       | 21 +++++++++++++------
 .../SlideshowCarousel.importable.tsx          |  4 ++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 6f1bcb1e359..4bc922d25c4 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -141,7 +141,7 @@ export type Props = {
 	/** The index of the card in a carousel */
 	index?: number;
 	/**
-	 * Useful for videos. Has the form: collection-{collection ID}-{card grouping type}-{card index}
+	 * Useful for IDs. Has the form: collection-{collection ID}-{card grouping type}-{card index}
 	 * For example, the first splash card in the second collection would be: "collection-1-splash-0"
 	 */
 	uniqueId?: string;
@@ -152,7 +152,7 @@ export type Props = {
 	showTopBarDesktop?: boolean;
 	showTopBarMobile?: boolean;
 	trailTextSize?: TrailTextSize;
-	/** A kicker image is seperate to the main media and renders as part of the kicker */
+	/** A kicker image is separate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
 	subtitleSize?: SubtitleSize;
 	/** Determines if the headline should be positioned within the content or outside the content */
diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx
index e1859b0b71d..a454b139fb4 100644
--- a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx
@@ -268,16 +268,23 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 		getOphanInfo(frontId);
 
 	return (
-		<div css={containerStyles} data-link-name={ophanFrontName}>
-			<ol
-				data-link-name={ophanComponentLink}
-				data-component={ophanComponentName}
-				data-container-name={'scrollable/highlights'}
+		<div
+			css={containerStyles}
+			data-link-name={ophanFrontName}
+			role="region"
+			aria-roledescription="carousel"
+			aria-label="Highlights"
+			aria-live="polite"
+		>
+			<ul
 				ref={carouselRef}
 				css={[
 					carouselStyles,
 					generateCarouselColumnStyles(carouselLength),
 				]}
+				data-link-name={ophanComponentLink}
+				data-component={ophanComponentName}
+				data-container-name="scrollable/highlights"
 				data-heatphan-type="carousel"
 			>
 				{trails.map((trail) => {
@@ -285,6 +292,8 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 						<li
 							key={trail.url}
 							css={[itemStyles, verticalLineStyles]}
+							role="group"
+							aria-roledescription="slide"
 						>
 							<HighlightsCard
 								format={trail.format}
@@ -304,7 +313,7 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 						</li>
 					);
 				})}
-			</ol>
+			</ul>
 
 			<Hide until="tablet">
 				{showPreviousButton && (
diff --git a/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx b/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx
index a5a08d3d989..c154ff8966a 100644
--- a/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx
+++ b/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx
@@ -291,7 +291,7 @@ export const SlideshowCarousel = ({
 							}
 							size="small"
 							disabled={!previousButtonEnabled}
-							aria-label="View next image in slideshow"
+							aria-label="Previous image"
 							// TODO: data-link-name="slideshow carousel left chevron"
 						/>
 
@@ -308,7 +308,7 @@ export const SlideshowCarousel = ({
 							}
 							size="small"
 							disabled={!nextButtonEnabled}
-							aria-label="View previous image in slideshow"
+							aria-label="Next image"
 							// TODO: data-link-name="slideshow carousel right chevron"
 						/>
 					</div>