From d9005fca2c6672179965c01886377e3d0d6193b3 Mon Sep 17 00:00:00 2001
From: Simon Adcock <simon.adcock@guardian.co.uk>
Date: Thu, 14 May 2026 08:04:47 +0100
Subject: [PATCH 1/3] move carousel aria from container to ul

---
 dotcom-rendering/src/components/Carousel.island.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/Carousel.island.tsx b/dotcom-rendering/src/components/Carousel.island.tsx
index b5a826bb843..d09fe9a094b 100644
--- a/dotcom-rendering/src/components/Carousel.island.tsx
+++ b/dotcom-rendering/src/components/Carousel.island.tsx
@@ -927,9 +927,6 @@ export const Carousel = ({
 					]}
 					data-component={onwardsSource}
 					data-link={formatAttrString(heading)}
-					role="region"
-					aria-roledescription="carousel"
-					aria-label={heading}
 				>
 					<Header
 						heading={heading}
@@ -947,6 +944,9 @@ export const Carousel = ({
 					<ul
 						css={carouselStyle}
 						ref={carouselRef}
+						aria-label={heading}
+						role="region"
+						aria-roledescription="carousel"
 						data-component={`carousel-small | maxIndex-${maxIndex}`}
 						data-heatphan-type="carousel"
 						onTouchStart={isApps ? onTouchStart : undefined}

From 97aa51e50b0857d7172e9ca833f95c1ed537926f Mon Sep 17 00:00:00 2001
From: Simon Adcock <simon.adcock@guardian.co.uk>
Date: Wed, 13 May 2026 15:01:03 +0100
Subject: [PATCH 2/3] use carousel id to link controls

---
 dotcom-rendering/src/components/CarouselNavigationButtons.tsx | 2 +-
 dotcom-rendering/src/components/ScrollableCarousel.tsx        | 1 +
 dotcom-rendering/src/components/ScrollableProduct.island.tsx  | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/CarouselNavigationButtons.tsx b/dotcom-rendering/src/components/CarouselNavigationButtons.tsx
index 4274c36ba94..7d52d68695f 100644
--- a/dotcom-rendering/src/components/CarouselNavigationButtons.tsx
+++ b/dotcom-rendering/src/components/CarouselNavigationButtons.tsx
@@ -89,7 +89,7 @@ export const CarouselNavigationButtons = ({
 	return ReactDOM.createPortal(
 		<div
 			role="group"
-			aria-controls="carousel"
+			aria-controls={`${sectionId}-carousel`}
 			aria-label="carousel arrows"
 			css={buttonStyles}
 		>
diff --git a/dotcom-rendering/src/components/ScrollableCarousel.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx
index 3cfaede1207..faf04eb9df7 100644
--- a/dotcom-rendering/src/components/ScrollableCarousel.tsx
+++ b/dotcom-rendering/src/components/ScrollableCarousel.tsx
@@ -393,6 +393,7 @@ export const ScrollableCarousel = ({
 					),
 					stackedCardRowsStyles(shouldStackCards),
 				]}
+				id={`${sectionId}-carousel`}
 				data-heatphan-type="carousel"
 				onFocus={scrollToCardOnFocus}
 				{...(isBelowTabletBreakpoint && {
diff --git a/dotcom-rendering/src/components/ScrollableProduct.island.tsx b/dotcom-rendering/src/components/ScrollableProduct.island.tsx
index 7fe38e8c373..3be0853207f 100644
--- a/dotcom-rendering/src/components/ScrollableProduct.island.tsx
+++ b/dotcom-rendering/src/components/ScrollableProduct.island.tsx
@@ -302,6 +302,7 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 					ref={carouselRef}
 					css={carouselStyles}
 					data-heatphan-type="carousel"
+					id="at-a-glance-carousel"
 				>
 					{products.map(
 						(product: ProductBlockElement, index: number) => (

From 305803aaef873ef56886d6eaf2f9425d2aa3bb63 Mon Sep 17 00:00:00 2001
From: Simon Adcock <simon.adcock@guardian.co.uk>
Date: Wed, 13 May 2026 15:01:55 +0100
Subject: [PATCH 3/3] add -title suffix to subhead id

---
 dotcom-rendering/src/components/ScrollableProduct.island.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/ScrollableProduct.island.tsx b/dotcom-rendering/src/components/ScrollableProduct.island.tsx
index 3be0853207f..fd826f5d30a 100644
--- a/dotcom-rendering/src/components/ScrollableProduct.island.tsx
+++ b/dotcom-rendering/src/components/ScrollableProduct.island.tsx
@@ -285,7 +285,7 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 			<div css={carouselHeader}>
 				<Subheading
 					format={format}
-					id={'at-a-glance'}
+					id={'at-a-glance-title'}
 					topPadding={false}
 				>
 					At a glance