diff --git a/dotcom-rendering/src/components/ProductCarouselCard.tsx b/dotcom-rendering/src/components/ProductCarouselCard.tsx index 716c9a8c460..4a945ba0030 100644 --- a/dotcom-rendering/src/components/ProductCarouselCard.tsx +++ b/dotcom-rendering/src/components/ProductCarouselCard.tsx @@ -109,7 +109,6 @@ export const ProductCarouselCard = ({ product.displayType !== 'ProductCardOnly' && ( event.stopPropagation()} cssOverrides={readMoreCta} data-component="at-a-glance-carousel-card-read-more" data-link-name="product read more link" diff --git a/dotcom-rendering/src/components/ScrollableProduct.importable.tsx b/dotcom-rendering/src/components/ScrollableProduct.importable.tsx index 32dbcba4a1a..27e6d94ff34 100644 --- a/dotcom-rendering/src/components/ScrollableProduct.importable.tsx +++ b/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) => (