@skyscanner/backpack-web 41.12.0 → 41.14.0

package/bpk-component-card-list/src/BpkCardList.js

@@ -38,6 +38,7 @@ const BpkCardList = props => {
     chipGroup,
     description,
     expandText,
+    initiallyInViewCardIndex = 0,
     initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
     initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
     layoutDesktop,
@@ -78,6 +79,7 @@ const BpkCardList = props => {
               initiallyShownCards: initiallyShownCardsMobile,
               layout: layoutMobile,
               accessibilityLabels: accessibilityLabels,
+              initiallyInViewCardIndex: initiallyInViewCardIndex,
               isMobile: true,
               children: cardList
             }), layoutMobile === LAYOUTS.stack && /*#__PURE__*/_jsx(BpkCardListGridStack, {
@@ -97,6 +99,7 @@ const BpkCardList = props => {
               initiallyShownCards: initiallyShownCardsDesktop,
               layout: layoutDesktop,
               accessibilityLabels: accessibilityLabels,
+              initiallyInViewCardIndex: initiallyInViewCardIndex,
               children: cardList
             }), layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination && /*#__PURE__*/_jsx(BpkCardListGridStack, {
               accessory: accessoryDesktop,

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -20,7 +20,7 @@ import { useRef, useState, useEffect, isValidElement, Children, useMemo } from '
 import throttle from 'lodash/throttle';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { RENDER_BUFFER_SIZE } from "./constants";
-import { lockScroll, setA11yTabIndex, useScrollToCard, useIntersectionObserver } from "./utils";
+import { setA11yTabIndex, useIntersectionObserver, usePageScrollSync } from "./utils";
 import STYLES from "./BpkCardListCarousel.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -30,6 +30,7 @@ const BpkCardListCarousel = props => {
     carouselLabel = (initiallyShownCards, childrenLength) => `Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
     children,
     currentIndex,
+    initialPageIndex,
     initiallyShownCards,
     isMobile = false,
     layout,
@@ -47,13 +48,20 @@ const BpkCardListCarousel = props => {
   const firstCardWidthRef = useRef(null);
   const firstCardHeightRef = useRef(null);
   const [visibilityList, setVisibilityList] = useState(Array(childrenLength).fill(0));
-  const stateScrollingLockRef = useRef(false);
-  const openSetStateLockTimeoutRef = useRef(null);
   const observerVisibility = useIntersectionObserver({
     root,
     threshold: 0.5
   }, setVisibilityList);
-  useScrollToCard(currentIndex * initiallyShownCards, root, cardRefs, stateScrollingLockRef);
+  usePageScrollSync({
+    currentIndex,
+    setCurrentIndex,
+    initiallyShownCards,
+    cardRefs,
+    visibilityList,
+    container: root,
+    enabled: !isMobile,
+    initialPageIndex
+  });
 
   // Similar to Virtual Scrolling to improve performance
   const firstVisibleIndex = Math.max(0, visibilityList.indexOf(1));
@@ -87,22 +95,6 @@ const BpkCardListCarousel = props => {
       }
     }
   }), [childrenLength, observerVisibility, visibilityList, firstCardWidthRef, firstCardHeightRef]);
-  useEffect(() => {
-    const container = root;
-    if (isMobile || !container) return undefined;
-    const lockScrollDuringInteraction = () => {
-      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef);
-    };
-    container.addEventListener('wheel', lockScrollDuringInteraction);
-    container.addEventListener('touchmove', lockScrollDuringInteraction);
-    return () => {
-      container.removeEventListener('touchmove', lockScrollDuringInteraction);
-      container.removeEventListener('wheel', lockScrollDuringInteraction);
-      if (openSetStateLockTimeoutRef.current) {
-        clearTimeout(openSetStateLockTimeoutRef.current);
-      }
-    };
-  }, [root]);
   useEffect(() => {
     // update hasBeenVisibleRef to include the range of cards that should be visible
     const start = currentIndex * initiallyShownCards;
@@ -111,15 +103,6 @@ const BpkCardListCarousel = props => {
       hasBeenVisibleRef.current.add(i);
     }
   }, [currentIndex, initiallyShownCards, childrenLength, dynamicRenderBufferSize]);
-  useEffect(() => {
-    const firstVisible = visibilityList.indexOf(1);
-    if (firstVisible >= 0) {
-      const newIndex = Math.floor(firstVisible / initiallyShownCards);
-      if (newIndex !== currentIndex) {
-        setCurrentIndex(newIndex);
-      }
-    }
-  }, [initiallyShownCards]);
   useEffect(() => {
     const handleResize = throttle(() => {
       firstCardWidthRef.current = null;
@@ -149,8 +132,9 @@ const BpkCardListCarousel = props => {
       if (firstCardHeightRef.current) {
         cardDimensionStyle.height = `${firstCardHeightRef.current}px`;
       }
+      const isPageStart = index % initiallyShownCards === 0;
       const commonProps = {
-        className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
+        className: getClassName(`bpk-card-list-row-rail__${layout}__card`, isPageStart && 'bpk-card-list-row-rail__card--page-start'),
         style: shownNumberStyle,
         key: `carousel-card-${index.toString()}`,
         role: 'group'
@@ -161,6 +145,7 @@ const BpkCardListCarousel = props => {
       if (!shouldRenderCard) {
         return /*#__PURE__*/_jsx("div", {
           ...commonProps,
+          ref: cardRefFns[index],
           style: {
             ...commonProps.style,
             ...cardDimensionStyle,

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:hidden;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}.bpk-card-list-row-rail__card-slot{display:grid;height:100%}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:scroll;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;-webkit-overflow-scrolling:touch;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(min-width: 32.0625rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{scroll-snap-align:none}}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}@media(min-width: 32.0625rem){.bpk-card-list-row-rail__card--page-start{scroll-snap-align:start;scroll-snap-stop:always}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}.bpk-card-list-row-rail__card-slot{display:grid;height:100%}

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js

@@ -28,6 +28,7 @@ const BpkCardListRowRailContainer = props => {
     accessibilityLabels,
     accessory,
     children,
+    initiallyInViewCardIndex,
     initiallyShownCards,
     isMobile = false,
     layout
@@ -35,7 +36,18 @@ const BpkCardListRowRailContainer = props => {
   const childrenCount = Children.count(children);
   const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
   const showAccessory = childrenCount > initiallyShownCards;
-  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Calculate initial page from card index
+  const [initialPageIndex] = useState(() => {
+    if (initiallyInViewCardIndex < 0) {
+      return 0;
+    }
+    if (initiallyInViewCardIndex >= childrenCount) {
+      return Math.max(0, totalIndicators - 1);
+    }
+    return Math.floor(initiallyInViewCardIndex / initiallyShownCards);
+  });
+  const [currentIndex, setCurrentIndex] = useState(initialPageIndex);
   const accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
     currentIndex: currentIndex,
     totalIndicators: totalIndicators,
@@ -57,6 +69,7 @@ const BpkCardListRowRailContainer = props => {
       isMobile: isMobile,
       carouselLabel: accessibilityLabels?.carouselLabel,
       slideLabel: accessibilityLabels?.slideLabel,
+      initialPageIndex: initialPageIndex,
       children: children
     }), accessoryContent && showAccessory && /*#__PURE__*/_jsx("div", {
       role: "region",

package/bpk-component-card-list/src/BpkCardListRowRail/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const RELEASE_LOCK_DELAY = 20;
+export declare const RELEASE_LOCK_DELAY = 200;
 export declare const RENDER_BUFFER_SIZE = 3;

package/bpk-component-card-list/src/BpkCardListRowRail/constants.js

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-export const RELEASE_LOCK_DELAY = 20;
+export const RELEASE_LOCK_DELAY = 200;
 export const RENDER_BUFFER_SIZE = 3;

package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts

@@ -1,9 +1,4 @@
-/**
- * Typically used to prevent useScrollToCard() from being called, to prevent scrollings caused by state changes, so as to avoid cyclic dependencies.
- * @param stateScrollingLockRef - Ref to the state that indicates if scrollIntoView should be locked
- * @param openSetStateLockTimeoutRef - Ref to the timeout that releases the lock after a delay. Should be renewed every time another scroll action is triggered, with a new lock is added.
- */
-export declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
+import type { Dispatch, SetStateAction, RefObject } from 'react';
 /**
  * Only sets the tabIndex of focusable elements as 0 if the card is visible, otherwise sets it to -1, including all its children.
  * For example, if there is a button inside a card which is not shown, it cannot be focused as well.
@@ -11,5 +6,27 @@ export declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<
  * @param index - Current container index
  */
 export declare const setA11yTabIndex: (el: HTMLDivElement | null, index: number, visibilityList: number[]) => void;
-export declare const useScrollToCard: (currentIndex: number, container: HTMLElement | null, cardRefs: React.MutableRefObject<Array<HTMLDivElement | null>>, stateScrollingLockRef: React.MutableRefObject<boolean>) => void;
-export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;
+export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: Dispatch<SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;
+type UsePageScrollSyncOptions = {
+    currentIndex: number;
+    setCurrentIndex: Dispatch<SetStateAction<number>>;
+    initiallyShownCards: number;
+    cardRefs: RefObject<Array<HTMLDivElement | null>>;
+    visibilityList: number[];
+    container: HTMLElement | null;
+    enabled: boolean;
+    initialPageIndex: number;
+};
+/**
+ * Provides bidirectional synchronisation between page index state and scroll position.
+ *
+ * - **State → Scroll**: When `currentIndex` changes (e.g. via pagination buttons),
+ *   the container scrolls to bring the corresponding page into view.
+ * - **Scroll → State**: When the user scrolls (via wheel or touch), `currentIndex`
+ *   is updated to reflect the first visible page.
+ *
+ * The hook uses a lock mechanism to prevent conflicts between programmatic and
+ * user-initiated scrolling.
+ */
+export declare const usePageScrollSync: ({ cardRefs, container, currentIndex, enabled, initialPageIndex, initiallyShownCards, setCurrentIndex, visibilityList, }: UsePageScrollSyncOptions) => void;
+export {};

package/bpk-component-card-list/src/BpkCardListRowRail/utils.js

@@ -19,25 +19,6 @@
 import { useEffect, useRef } from 'react';
 import { RELEASE_LOCK_DELAY } from "./constants";
 
-/**
- * Typically used to prevent useScrollToCard() from being called, to prevent scrollings caused by state changes, so as to avoid cyclic dependencies.
- * @param stateScrollingLockRef - Ref to the state that indicates if scrollIntoView should be locked
- * @param openSetStateLockTimeoutRef - Ref to the timeout that releases the lock after a delay. Should be renewed every time another scroll action is triggered, with a new lock is added.
- */
-
-export const lockScroll = (stateScrollingLockRef, openSetStateLockTimeoutRef) => {
-  // eslint-disable-next-line no-param-reassign
-  stateScrollingLockRef.current = true;
-  if (openSetStateLockTimeoutRef.current) {
-    clearTimeout(openSetStateLockTimeoutRef.current);
-  }
-  // eslint-disable-next-line no-param-reassign
-  openSetStateLockTimeoutRef.current = setTimeout(() => {
-    // eslint-disable-next-line no-param-reassign
-    stateScrollingLockRef.current = false;
-  }, RELEASE_LOCK_DELAY);
-};
-
 /**
  * Only sets the tabIndex of focusable elements as 0 if the card is visible, otherwise sets it to -1, including all its children.
  * For example, if there is a button inside a card which is not shown, it cannot be focused as well.
@@ -53,22 +34,6 @@ export const setA11yTabIndex = (el, index, visibilityList) => {
     targetElement.tabIndex = visibilityList[index] === 1 ? 0 : -1;
   });
 };
-export const useScrollToCard = (currentIndex, container, cardRefs, stateScrollingLockRef) => {
-  useEffect(() => {
-    const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
-    if (!isVisible) return; // Escape from scrollIntoView if the container is not visible, otherwise the webpage will scroll down to the last rendered & non-visible container
-
-    if (stateScrollingLockRef.current && stateScrollingLockRef.current === true) return;
-    const targetCard = cardRefs.current[currentIndex];
-    if (targetCard) {
-      targetCard.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start'
-      });
-    }
-  }, [currentIndex]);
-};
 export const useIntersectionObserver = ({
   root,
   threshold
@@ -115,4 +80,122 @@ export const useIntersectionObserver = ({
     }
   };
   return observeElement;
+};
+/**
+ * Provides bidirectional synchronisation between page index state and scroll position.
+ *
+ * - **State → Scroll**: When `currentIndex` changes (e.g. via pagination buttons),
+ *   the container scrolls to bring the corresponding page into view.
+ * - **Scroll → State**: When the user scrolls (via wheel or touch), `currentIndex`
+ *   is updated to reflect the first visible page.
+ *
+ * The hook uses a lock mechanism to prevent conflicts between programmatic and
+ * user-initiated scrolling.
+ */
+
+export const usePageScrollSync = ({
+  cardRefs,
+  container,
+  currentIndex,
+  enabled,
+  initialPageIndex,
+  initiallyShownCards,
+  setCurrentIndex,
+  visibilityList
+}) => {
+  const isUserScrollingRef = useRef(false);
+  const scrollEndTimeoutRef = useRef(null);
+  const lastCurrentIndexRef = useRef(currentIndex);
+  const hasInitialScrolled = useRef(false);
+
+  // Effect 0: Initial scroll (instant, runs once on mount)
+  useEffect(() => {
+    if (hasInitialScrolled.current) {
+      return;
+    }
+    hasInitialScrolled.current = true;
+    if (!enabled || initialPageIndex === 0) {
+      return;
+    }
+    const targetCard = cardRefs.current?.[initialPageIndex * initiallyShownCards];
+    if (targetCard) {
+      targetCard.scrollIntoView({
+        behavior: 'instant',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [cardRefs, enabled, initialPageIndex, initiallyShownCards]); // Run once on mount only
+
+  // Effect 1: Programmatic scroll when currentIndex changes
+  useEffect(() => {
+    if (!enabled ||
+    // Avoid triggering programmatic scroll when currentIndex changes due to user scroll
+    isUserScrollingRef.current || lastCurrentIndexRef.current === currentIndex) {
+      return;
+    }
+    lastCurrentIndexRef.current = currentIndex;
+    const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
+    if (!isVisible) {
+      return;
+    }
+    const targetCard = cardRefs.current?.[currentIndex * initiallyShownCards];
+    if (targetCard) {
+      targetCard.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [currentIndex, enabled, container, initiallyShownCards, cardRefs]);
+
+  // Effect 2: Scroll detection and silence-based lock release
+  useEffect(() => {
+    if (!enabled || !container) return undefined;
+    const handleScrollActivity = e => {
+      // Set flag only for user input events, not scroll events
+      if (e.type === 'wheel' || e.type === 'touchstart') {
+        isUserScrollingRef.current = true;
+      }
+
+      // Reset silence timer on every scroll-related event
+      if (scrollEndTimeoutRef.current) {
+        clearTimeout(scrollEndTimeoutRef.current);
+      }
+
+      // Release lock after scroll silence
+      scrollEndTimeoutRef.current = setTimeout(() => {
+        isUserScrollingRef.current = false;
+      }, RELEASE_LOCK_DELAY);
+    };
+    container.addEventListener('scroll', handleScrollActivity, {
+      passive: true
+    });
+    container.addEventListener('wheel', handleScrollActivity, {
+      passive: true
+    });
+    container.addEventListener('touchstart', handleScrollActivity, {
+      passive: true
+    });
+    return () => {
+      container.removeEventListener('scroll', handleScrollActivity);
+      container.removeEventListener('wheel', handleScrollActivity);
+      container.removeEventListener('touchstart', handleScrollActivity);
+      if (scrollEndTimeoutRef.current) {
+        clearTimeout(scrollEndTimeoutRef.current);
+      }
+    };
+  }, [enabled, container]);
+
+  // Effect 3: Update currentIndex from visibility during user scroll
+  useEffect(() => {
+    if (!enabled || !isUserScrollingRef.current) return;
+    const firstVisibleIndex = visibilityList.indexOf(1);
+    if (firstVisibleIndex === -1) return;
+    const newPageIndex = Math.floor(firstVisibleIndex / initiallyShownCards);
+    if (newPageIndex !== currentIndex) {
+      setCurrentIndex(newPageIndex);
+      lastCurrentIndexRef.current = newPageIndex;
+    }
+  }, [visibilityList, enabled, initiallyShownCards, currentIndex, setCurrentIndex]);
 };

package/bpk-component-card-list/src/common-types.d.ts

@@ -36,6 +36,7 @@ type CardListBaseProps = {
     accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
     initiallyShownCardsDesktop?: number;
     initiallyShownCardsMobile?: number;
+    initiallyInViewCardIndex?: number;
     chipGroup?: ReactElement;
     buttonContent?: React.ReactNode;
     onButtonClick?: () => void;
@@ -69,6 +70,7 @@ type CardListRowRailProps = {
     accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
     isMobile?: boolean;
     accessibilityLabels?: AccessibilityLabels;
+    initiallyInViewCardIndex: number;
 };
 type CardListCarouselProps = {
     children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
@@ -79,6 +81,7 @@ type CardListCarouselProps = {
     isMobile?: boolean;
     carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
     slideLabel?: (index: number, childrenLength: number) => string;
+    initialPageIndex: number;
 };
 type CardListProps = CardListBaseProps;
 export default CardListProps;

package/bpk-component-content-cards/src/BpkContentCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-content-card--link{color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media(max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media(max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media(max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media(max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media(max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#626971;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}
+.bpk-content-card--link{position:relative;display:block;border-radius:.75rem;color:inherit;font:inherit;text-decoration:inherit}.bpk-content-card--link:focus{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-content-card--horizontal{display:grid;column-gap:2.5rem;grid-template-columns:minmax(10%, 38.75rem) 40%;align-items:center}@media(max-width: 32rem){.bpk-content-card--horizontal{grid-template-columns:1fr}}.bpk-content-card--horizontal .bpk-content-card--image-container{width:100%;height:26.25rem}@media(max-width: 32rem){.bpk-content-card--horizontal .bpk-content-card--image-container{max-height:11.25rem;margin-bottom:1rem}}@media(max-width: 64rem){.bpk-content-card--horizontal .bpk-content-card--image-container{height:100%}}.bpk-content-card--vertical .bpk-content-card--image{height:28.75rem;margin-bottom:1rem}@media(max-width: 48rem){.bpk-content-card--vertical .bpk-content-card--image{width:100%;height:auto;max-height:16.25rem}}@media(max-width: 32rem){.bpk-content-card--vertical .bpk-content-card--image{max-height:11.25rem}}.bpk-content-card--headline{margin-bottom:.25rem;font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-content-card--description{color:#626971;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-card--image{width:100%;height:100%;border-radius:.75rem;object-fit:cover}

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -15,6 +15,12 @@ export type WithOpenEventsProps = {
      */
     onOpen?: () => void;
     hasTouchSupport?: boolean;
+    /**
+     * @deprecated Use inputMode="none" instead. readOnly will be removed in a future version.
+     * Previously used to prevent the mobile keyboard from opening, but this caused a WCAG 1.3.1
+     * violation due to conflicting readonly + aria-readonly attributes.
+     */
+    readOnly?: boolean | string;
 };
 type EventHandlers = {
     onClick?: (event: UIEvent) => void;
@@ -23,10 +29,11 @@ type EventHandlers = {
     onTouchEnd?: (event: UIEvent) => void;
     onKeyDown?: (event: UIEvent) => void;
     onKeyUp?: (event: UIEvent) => void;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     readOnly?: string;
     'aria-readonly'?: boolean;
 };
-type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
+type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'inputMode' | 'readOnly' | 'aria-readonly'>;
 declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: ComponentType<P>) => {
     new (props: P & WithOpenEventsProps & InputProps): {
         focusCanOpen: boolean;
@@ -35,25 +42,25 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         handleBlur: () => void;
         render(): ReactElement;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
+        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: {

package/bpk-component-input/src/withOpenEvents.js

@@ -96,8 +96,12 @@ const withOpenEvents = WithOpenEventsInputComponent => {
         onKeyUp,
         onOpen,
         onTouchEnd,
+        readOnly,
         ...rest
       } = this.props;
+      if (readOnly !== undefined) {
+        console.warn('withOpenEvents: The readOnly prop is deprecated and will be removed in a future version. ' + 'The component now uses inputMode="none" to prevent mobile keyboards from opening, ' + 'which avoids WCAG 1.3.1 violations from conflicting readonly + aria-readonly attributes.');
+      }
       const eventHandlers = {
         onClick: withEventHandler(onOpen, onClick),
         // @ts-expect-error for some reason the type KeyboardEvent was not being recognized as
@@ -105,9 +109,15 @@ const withOpenEvents = WithOpenEventsInputComponent => {
         onKeyDown: withEventHandler(handleKeyEvent(onOpen), onKeyDown)
       };
       if (hasTouchSupport) {
-        // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
-        eventHandlers.readOnly = 'readOnly';
-        eventHandlers['aria-readonly'] = false;
+        if (readOnly !== undefined) {
+          // Deprecated: prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
+          eventHandlers.readOnly = 'readOnly';
+          eventHandlers['aria-readonly'] = false;
+        } else {
+          // Prevents the mobile keyboard from opening (iOS / Android) using inputMode="none"
+          // This avoids WCAG 1.3.1 violation from conflicting readonly + aria-readonly attributes
+          eventHandlers.inputMode = 'none';
+        }
         eventHandlers.onTouchEnd = withEventHandler(this.handleTouchEnd, onTouchEnd);
       }
 

package/bpk-component-nudger/src/BpkNudger.js

@@ -110,7 +110,7 @@ const BpkNudger = ({
           inputRef.current && setNativeValue(inputRef.current, newValue);
         },
         disabled: minButtonDisabled,
-        title: decreaseButtonLabel,
+        "aria-label": decreaseButtonLabel,
         "aria-controls": id,
         children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
       }), /*#__PURE__*/_jsx("input", {
@@ -151,7 +151,7 @@ const BpkNudger = ({
           inputRef.current && setNativeValue(inputRef.current, newValue);
         },
         disabled: maxButtonDisabled,
-        title: increaseButtonLabel,
+        "aria-label": increaseButtonLabel,
         "aria-controls": id,
         children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.12.0",
+  "version": "41.14.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",