Allow link clicks on carousels

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -923,25 +923,21 @@ export const Card = ({
 						isSmallCard={isSmallCard}
 					>
 						{media.type === 'slideshow' && (
-							<div
-								css={css`
-									position: relative;
-									z-index: ${getZIndex('card-nested-link')};
-								`}
+							<Island
+								priority="feature"
+								defer={{ until: 'visible' }}
 							>
-								<Island
-									priority="feature"
-									defer={{ until: 'visible' }}
-								>
-									<SlideshowCarousel
-										images={media.slideshowImages}
-										imageSize={mediaSize}
-										hasNavigationBackgroundColour={
-											!!hasSublinks
-										}
-									/>
-								</Island>
-							</div>
+								<SlideshowCarousel
+									images={media.slideshowImages}
+									imageSize={mediaSize}
+									hasNavigationBackgroundColour={
+										!!hasSublinks
+									}
+									linkTo={linkTo}
+									linkAriaLabel={headlineText}
+									dataLinkName={resolvedDataLinkName}
+								/>
+							</Island>
 						)}
 						{media.type === 'avatar' && (
 							<AvatarContainer

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -59,7 +59,7 @@ const hoverStyles = css`
 	:has(
 			ul.sublinks:hover,
 			.video-container.loop:hover,
-			.slideshow-carousel:hover,
+			.slideshow-carousel-footer:hover,
 			.branding-logo:hover
 		) {
 		.card-headline .show-underline {

dotcom-rendering/src/components/SlideshowCarousel.importable.tsx

@@ -13,6 +13,7 @@ import {
 	SvgChevronRightSingle,
 } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
+import { getZIndex } from '../lib/getZIndex';
 import { takeFirst } from '../lib/tuple';
 import { palette } from '../palette';
 import type { DCRSlideshowImage } from '../types/front';
@@ -55,6 +56,11 @@ const carouselItemStyles = css`
 	scroll-snap-align: start;
 `;
 
+const carouselLinkStyles = css`
+	position: relative;
+	z-index: ${getZIndex('card-nested-link')};
+`;
+
 const captionStyles = css`
 	position: absolute;
 	bottom: 0;
@@ -74,6 +80,8 @@ const navigationStyles = (hasBackgroundColour: boolean) => css`
 	display: flex;
 	align-items: center;
 	padding-top: ${space[2]}px;
+	position: relative;
+	z-index: ${getZIndex('card-nested-link')};
 
 	${until.tablet} {
 		background-color: ${hasBackgroundColour
@@ -108,12 +116,18 @@ type Props = {
 	images: readonly DCRSlideshowImage[];
 	imageSize: MediaSizeType;
 	hasNavigationBackgroundColour: boolean;
+	linkTo: string;
+	linkAriaLabel: string;
+	dataLinkName?: string;
 };
 
 export const SlideshowCarousel = ({
 	images,
 	imageSize,
 	hasNavigationBackgroundColour,
+	linkTo,
+	linkAriaLabel,
+	dataLinkName,
 }: Props) => {
 	const carouselRef = useRef<HTMLUListElement | null>(null);
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
@@ -192,37 +206,47 @@ export const SlideshowCarousel = ({
 	const slideshowImageCount = slideshowImages.length;
 
 	return (
-		<div className="slideshow-carousel">
-			<ul
-				ref={carouselRef}
-				css={carouselStyles}
-				data-heatphan-type="carousel"
+		<>
+			<a
+				href={linkTo}
+				css={carouselLinkStyles}
+				aria-label={linkAriaLabel}
+				data-link-name={dataLinkName}
 			>
-				{slideshowImages.map((image, index) => {
-					const loading = index > 0 ? 'lazy' : 'eager';
-					return (
-						<li css={carouselItemStyles} key={image.imageSrc}>
-							<figure>
-								<CardPicture
-									mainImage={image.imageSrc}
-									imageSize={imageSize}
-									aspectRatio="5:4"
-									alt={image.imageCaption}
-									loading={loading}
-								/>
-								{!!image.imageCaption && (
-									<figcaption css={captionStyles}>
-										{image.imageCaption}
-									</figcaption>
-								)}
-							</figure>
-						</li>
-					);
-				})}
-			</ul>
+				<ul
+					ref={carouselRef}
+					css={carouselStyles}
+					data-heatphan-type="carousel"
+				>
+					{slideshowImages.map((image, index) => {
+						const loading = index > 0 ? 'lazy' : 'eager';
+						return (
+							<li css={carouselItemStyles} key={image.imageSrc}>
+								<figure>
+									<CardPicture
+										mainImage={image.imageSrc}
+										imageSize={imageSize}
+										aspectRatio="5:4"
+										alt={image.imageCaption}
+										loading={loading}
+									/>
+									{!!image.imageCaption && (
+										<figcaption css={captionStyles}>
+											{image.imageCaption}
+										</figcaption>
+									)}
+								</figure>
+							</li>
+						);
+					})}
+				</ul>
+			</a>
 
 			{slideshowImageCount > 1 && (
-				<div css={navigationStyles(hasNavigationBackgroundColour)}>
+				<div
+					className="slideshow-carousel-footer"
+					css={navigationStyles(hasNavigationBackgroundColour)}
+				>
 					<div css={scrollingDotStyles}>
 						<SlideshowCarouselScrollingDots
 							total={slideshowImageCount}
@@ -266,6 +290,6 @@ export const SlideshowCarousel = ({
 					</div>
 				</div>
 			)}
-		</div>
+		</>
 	);
 };

dotcom-rendering/src/components/SlideshowCarousel.stories.tsx

@@ -91,6 +91,9 @@ const meta = {
 		images,
 		imageSize: 'medium',
 		hasNavigationBackgroundColour: false,
+		linkTo: 'https://www.theguardian.com',
+		linkAriaLabel: 'news | group-3 | card-@1 | media-slideshow',
+		dataLinkName: 'slideshow-carousel',
 	},
 	render: (args) => (
 		<Wrapper>