feat(BOOK-101): Added functionality to show active map card when focus is within the hotel card

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/HotelCardListing/index.tsx

@@ -221,6 +221,8 @@ export default function HotelCardListing({
                 ),
               }
             }
+            onFocusIn={() => engage(hotel.hotel.name)}
+            onFocusOut={() => disengage()}
             onHover={() => engage(hotel.hotel.name)}
             onHoverEnd={() => disengage()}
             onAddressClick={() => {

packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx

@@ -88,6 +88,8 @@ export const Default: Story = {
     onAddressClick: fn,
     onHover: fn,
     onHoverEnd: fn,
+    onFocusIn: fn,
+    onFocusOut: fn,
   },
 }
 

packages/design-system/lib/components/HotelCard/index.tsx

@@ -2,7 +2,8 @@
 
 import { cx } from 'class-variance-authority'
 import { type ReadonlyURLSearchParams, useSearchParams } from 'next/navigation'
-import { memo } from 'react'
+import { memo, useState } from 'react'
+import { useFocusWithin } from 'react-aria'
 import { useIntl } from 'react-intl'
 
 import {
@@ -116,6 +117,8 @@ export type HotelCardProps = {
 
   onHover: () => void
   onHoverEnd: () => void
+  onFocusIn: () => void
+  onFocusOut: () => void
   onAddressClick: () => void
 }
 
@@ -139,8 +142,18 @@ export const HotelCard = memo(
     onAddressClick,
     onHover,
     onHoverEnd,
+    onFocusIn,
+    onFocusOut,
   }: HotelCardProps) => {
     const searchParams = useSearchParams()
+    const [isFocusWithin, setIsFocusWithin] = useState(false)
+    const { focusWithinProps } = useFocusWithin({
+      onFocusWithin: onFocusIn,
+      onBlurWithin: onFocusOut,
+      onFocusWithinChange: (isFocusWithin) => {
+        setIsFocusWithin(isFocusWithin)
+      },
+    })
 
     const intl = useIntl()
 
@@ -174,11 +187,24 @@ export const HotelCard = memo(
       prices?.member?.rateType === RateTypeEnum.PublicPromotion
     const showBookingCodeChip = bookingCode || isCampaign
 
+    function onMouseEnter() {
+      if (!isFocusWithin) {
+        onHover()
+      }
+    }
+
+    function onMouseLeave() {
+      if (!isFocusWithin) {
+        onHoverEnd()
+      }
+    }
+
     return (
       <article
+        {...focusWithinProps}
         className={classNames}
-        onMouseEnter={() => onHover()}
+        onMouseEnter={onMouseEnter}
-        onMouseLeave={() => onHoverEnd()}
+        onMouseLeave={onMouseLeave}
       >
         <div>
           <div className={styles.imageContainer}>

packages/design-system/package.json

@@ -234,6 +234,7 @@
     "@vis.gl/react-google-maps": "^1.5.2",
     "next": "^15",
     "react": "^19.1.0",
+    "react-aria": "^3.39.0",
     "react-aria-components": "^1.8.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.2",

yarn.lock

@@ -5169,6 +5169,7 @@ __metadata:
     "@vis.gl/react-google-maps": ^1.5.2
     next: ^15
     react: ^19.1.0
+    react-aria: ^3.39.0
     react-aria-components: ^1.8.0
     react-dom: ^19.1.0
     react-hook-form: ^7.56.2