Remove autoscroll on product carousel

This removes a function which causes focus events to scroll the carousel to show card clicked (#15286)

Author: oliverabrahams

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -109,7 +109,6 @@ export const ProductCarouselCard = ({
 					product.displayType !== 'ProductCardOnly' && (
 						<Link
 							href={`#${headingId}`}
-							onFocus={(event) => event.stopPropagation()}
 							cssOverrides={readMoreCta}
 							data-component="at-a-glance-carousel-card-read-more"
 							data-link-name="product read more link"

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

@@ -202,61 +202,6 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 		};
 	};
 
-	/**
-	 * --- COPIED FROM ScrollableCarousel ---
-	 * Scrolls the carousel to a certain position when a card gains focus.
-	 *
-	 * If a card gains focus (e.g. by tabbing through the elements of the page) then the browser
-	 * will scroll the container to the focused card if it is NOT visible. If it is partially visible,
-	 * such as in the case with our carousel, then the browser will not bring the card in to view.
-	 * (Tested with Chrome and Firefox).
-	 */
-	const scrollToCardOnFocus = () => {
-		const carouselElement = carouselRef.current;
-		if (!carouselElement) return;
-
-		/**
-		 * We know the carousel has focus,
-		 */
-		let focusedCarouselPosition = null;
-		for (const [index, element] of Array.from(
-			carouselElement.childNodes,
-		).entries()) {
-			if (element.contains(document.activeElement)) {
-				focusedCarouselPosition = index + 1;
-			}
-		}
-
-		/**
-		 * If none of the cards in the carousel have focus, we don't change the carousel scroll position.
-		 */
-		if (focusedCarouselPosition === null) return;
-
-		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
-
-		/**
-		 * We use rounding as the users left scroll position is not always equal to the card width, but it is
-		 * very close. If the user is mid-scroll when starting focus on a carousel item (unlikely!) then the
-		 * scroll position is whichever is closest. We don't need to be exact as the number of carousel slides is small.
-		 */
-		const scrollPosition = Math.round(
-			(carouselElement.scrollLeft + cardWidth) / cardWidth,
-		);
-
-		/**
-		 * If the focused card is next to the card in the left-most position, then it
-		 * is not completely off-screen. It is either partially visible or entirely
-		 * visible (when the number of visible carousel slides is greater than 1).
-		 *
-		 * Bring this adjacent card into the left-most position.
-		 */
-		if (focusedCarouselPosition === scrollPosition + 1) {
-			scrollTo('right');
-		} else if (focusedCarouselPosition === scrollPosition - 1) {
-			scrollTo('left');
-		}
-	};
-
 	/**
 	 * Update the count of the first card / how far scrolled the carousel is
 	 *
@@ -347,7 +292,6 @@ export const ScrollableProduct = ({ products, format }: Props) => {
 					ref={carouselRef}
 					css={carouselStyles}
 					data-heatphan-type="carousel"
-					onFocus={scrollToCardOnFocus}
 				>
 					{products.map(
 						(product: ProductBlockElement, index: number) => (