From 4a6c64f921ecbc4689fe6d6094999a62d4f5bb5a Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Tue, 28 Oct 2025 09:36:21 +0000
Subject: [PATCH] Merged in fix/BOOK-111-bookingwidget-scrollable-zoom (pull
 request #3017)

fix(BOOK-111): make bookingwidget scrollable for zoomed in accessibility

* fix(BOOK-111): make bookingwidget scrollable for zoomed in accessibility

* fix(BOOK-111): dont scroll bookingwidget if searchlist is open


Approved-by: Erik Tiekstra
---
 .../BookingWidgetForm/FormContent/Search/index.tsx         | 5 ++++-
 .../lib/components/BookingWidget/bookingWidget.module.css  | 7 +++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx
index 18d6fb822..7f8b664a7 100644
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx
@@ -117,7 +117,10 @@ export function Search({
         openMenu,
         selectHighlightedItem,
       }) => (
-        <div className={searchContainerVariants({ variant })}>
+        <div
+          className={searchContainerVariants({ variant })}
+          data-searchlist-open={isOpen}
+        >
           <div className={styles.inputContainer}>
             <label
               {...getLabelProps({
diff --git a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
index faa7a6c8c..23703e7a4 100644
--- a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
@@ -21,9 +21,14 @@
   position: fixed;
   left: 0;
   bottom: -100%;
+  overflow-y: auto;
   transition: bottom 300ms ease;
 }
 
+.formContainer:has([data-searchlist-open="true"]) {
+  overflow-y: visible;
+}
+
 .compact {
   .formContainer {
     border-radius: var(--Corner-radius-lg);
@@ -38,6 +43,7 @@
 
 .wrapper[data-booking-widget-open="true"] {
   z-index: var(--booking-widget-open-z-index);
+  overflow-y: visible;
 }
 
 .wrapper[data-booking-widget-open="true"] .formContainer {
@@ -75,6 +81,7 @@
     height: auto;
     position: static;
     padding: 0;
+    overflow-y: visible;
 
     &.compactFormContainer {
       box-shadow: none;