Merge pull request #12836 from guardian/fix-carousel-in-android

Add touch start and end events for key events carousel

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -86,6 +86,10 @@ export const getDiscussionClient: BridgetApi<'getDiscussionClient'> = () => ({
 	recommend: async () => discussionErrorResponse,
 });
 
+export const getInteractionClient: BridgetApi<
+	'getInteractionClient'
+> = () => ({});
+
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -100,6 +104,7 @@ export const ensure_all_exports_are_present = {
 	getNewslettersClient,
 	getDiscussionClient,
 	getTagClient,
+	getInteractionClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

dotcom-rendering/package.json

@@ -38,7 +38,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "21.0.0",
-		"@guardian/bridget": "8.0.0",
+		"@guardian/bridget": "8.1.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
 		"@guardian/commercial": "23.7.4",

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

@@ -7,6 +7,7 @@ import {
 	SvgChevronRightSingle,
 } from '@guardian/source/react-components';
 import { useRef } from 'react';
+import { getInteractionClient } from '../lib/bridgetApi';
 import { palette } from '../palette';
 import type { Block } from '../types/blocks';
 import type { RenderingTarget } from '../types/renderingTarget';
@@ -114,13 +115,23 @@ export const KeyEventsCarousel = ({
 }: Props) => {
 	const carousel = useRef<HTMLDivElement | null>(null);
 	const cardWidth = 200;
+	const isApps = renderingTarget === 'Apps';
 
 	const goPrevious = () => {
 		if (carousel.current) carousel.current.scrollLeft -= cardWidth;
 	};
 	const goNext = () => {
 		if (carousel.current) carousel.current.scrollLeft += cardWidth;
 	};
+
+	const onTouchStart = async () => {
+		await getInteractionClient().disableArticleSwipe(true);
+	};
+
+	const onTouchEnd = async () => {
+		await getInteractionClient().disableArticleSwipe(false);
+	};
+
 	const filteredKeyEvents = keyEvents.filter(isValidKeyEvent);
 	const carouselLength = filteredKeyEvents.length;
 	const shortCarousel = carouselLength <= 4;
@@ -132,6 +143,8 @@ export const KeyEventsCarousel = ({
 				<div css={titleStyles}>Key events</div>
 			</Hide>
 			<div
+				onTouchStart={isApps ? onTouchStart : undefined}
+				onTouchEnd={isApps ? onTouchEnd : undefined}
 				ref={carousel}
 				id="key-events-carousel"
 				css={[carouselStyles, shortCarousel && leftMarginStyles]}

dotcom-rendering/src/lib/bridgetApi.ts

@@ -4,6 +4,7 @@ import * as Commercial from '@guardian/bridget/Commercial';
 import * as Discussion from '@guardian/bridget/Discussion';
 import * as Environment from '@guardian/bridget/Environment';
 import * as Gallery from '@guardian/bridget/Gallery';
+import * as Interaction from '@guardian/bridget/Interaction';
 import * as Metrics from '@guardian/bridget/Metrics';
 import * as Navigation from '@guardian/bridget/Navigation';
 import * as Newsletters from '@guardian/bridget/Newsletters';
@@ -165,3 +166,15 @@ export const getDiscussionClient = (): Discussion.Client<void> => {
 	}
 	return discussionClient;
 };
+
+let interactionClient: Interaction.Client<void> | undefined = undefined;
+export const getInteractionClient = (): Interaction.Client<void> => {
+	if (!interactionClient) {
+		interactionClient = createAppClient<Interaction.Client<void>>(
+			Interaction.Client,
+			'buffered',
+			'compact',
+		);
+	}
+	return interactionClient;
+};