Merge pull request #14888 from guardian/doml/carousel-clicks

Enable clicks on carousel images to link through to the article

Author: domlander

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

@@ -917,31 +917,26 @@ export const Card = ({
 						mediaType={media.type}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						hideMediaOverlay={media.type === 'slideshow'}
 						padMedia={isMediaCardOrNewsletter && isBetaContainer}
 						isBetaContainer={isBetaContainer}
 						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/Card/components/MediaWrapper.tsx

@@ -32,12 +32,6 @@ type Props = {
 	mediaType?: CardMediaType;
 	mediaPositionOnDesktop: MediaPositionType;
 	mediaPositionOnMobile: MediaPositionType;
-	/**
-	 * Forces hiding the image overlay added to pictures & slideshows on hover.
-	 * This is to allow hiding the overlay on slideshow carousels where we don't
-	 * want it to be shown whilst retaining it for existing slideshows.
-	 */
-	hideMediaOverlay?: boolean;
 	isBetaContainer: boolean;
 	isSmallCard: boolean;
 	padMedia?: boolean;
@@ -207,7 +201,6 @@ export const MediaWrapper = ({
 	mediaType,
 	mediaPositionOnDesktop,
 	mediaPositionOnMobile,
-	hideMediaOverlay,
 	isBetaContainer,
 	isSmallCard,
 	padMedia,
@@ -274,25 +267,22 @@ export const MediaWrapper = ({
 			<>
 				{children}
 				{/* This overlay is styled when the CardLink is hovered */}
-				{(mediaType === 'picture' ||
-					mediaType === 'slideshow' ||
-					mediaType === 'cinemagraph') &&
-					!hideMediaOverlay && (
-						<div
-							css={[
-								mediaOverlayContainerStyles,
-								padMedia &&
-									mediaPaddingStyles(
-										mediaPositionOnDesktop,
-										mediaPositionOnMobile,
-									),
-							]}
-						>
-							{/* This child div is needed as the hover background colour covers the padded
+				{(mediaType === 'picture' || mediaType === 'cinemagraph') && (
+					<div
+						css={[
+							mediaOverlayContainerStyles,
+							padMedia &&
+								mediaPaddingStyles(
+									mediaPositionOnDesktop,
+									mediaPositionOnMobile,
+								),
+						]}
+					>
+						{/* This child div is needed as the hover background colour covers the padded
 							    area around the image when the hover styles are applied to the top-level div */}
-							<div className="media-overlay" />
-						</div>
-					)}
+						<div className="media-overlay" />
+					</div>
+				)}
 			</>
 		</div>
 	);

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
@@ -104,16 +112,30 @@ const scrollingDotStyles = css`
 	}
 `;
 
+const mediaOverlayStyles = css`
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+`;
+
 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 +214,51 @@ 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}
+				<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>
+								<div
+									css={mediaOverlayStyles}
+									className="media-overlay"
 								/>
-								{!!image.imageCaption && (
-									<figcaption css={captionStyles}>
-										{image.imageCaption}
-									</figcaption>
-								)}
-							</figure>
-						</li>
-					);
-				})}
-			</ul>
+							</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 +302,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>

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -42,9 +42,9 @@ const hoverStyles = css`
 	:hover .media-overlay {
 		position: absolute;
 		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
-		left: 0;
 		background-color: ${palette('--card-background-hover')};
 	}