fix: SW-1010 Fixed low screen height accessibility issue

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -98,6 +98,7 @@ export default function ChildInfoSelector({
             {...register(ageFieldName, {
               required: true,
             })}
+            isNestedInModal={true}
           />
         </div>
         <div>
@@ -114,6 +115,7 @@ export default function ChildInfoSelector({
               {...register(bedFieldName, {
                 required: true,
               })}
+              isNestedInModal={true}
             />
           ) : null}
         </div>

components/GuestsRoomsPicker/Form.tsx

@@ -21,9 +21,11 @@ import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
 export default function GuestsRoomsPickerDialog({
   rooms,
   onClose,
+  isOverflowed = false,
 }: {
   rooms: GuestsRoom[]
   onClose: () => void
+  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
 }) {
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
@@ -124,7 +126,7 @@ export default function GuestsRoomsPickerDialog({
           <Tooltip
             heading={disabledBookingOptionsHeader}
             text={disabledBookingOptionsText}
-            position="bottom"
+            position={isOverflowed ? "top" : "bottom"}
             arrow="left"
           >
             {rooms.length < 4 ? (

components/GuestsRoomsPicker/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import {
   Button,
   Dialog,
@@ -26,6 +26,8 @@ export default function GuestsRoomsPickerForm() {
 
   const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
   const [isDesktop, setIsDesktop] = useState(true)
+  const [containerHeight, setContainerHeight] = useState(0)
+  const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later
 
   const htmlElement =
     typeof window !== "undefined" ? document.querySelector("body") : null
@@ -46,12 +48,55 @@ export default function GuestsRoomsPickerForm() {
     setIsDesktop(checkIsDesktop)
   }, [checkIsDesktop])
 
+  const updateHeight = useCallback(() => {
+    if (typeof window !== undefined) {
+      // Get available space for picker to show without going beyond screen
+      let maxHeight =
+        window.innerHeight -
+        (document.querySelector("#booking-widget")?.getBoundingClientRect()
+          .bottom ?? 0) -
+        50
+      const innerContainerHt = document
+        .querySelector(".react-aria-Popover")
+        ?.getBoundingClientRect().height
+      if (
+        maxHeight != containerHeight &&
+        innerContainerHt &&
+        maxHeight <= innerContainerHt
+      ) {
+        setContainerHeight(maxHeight)
+      } else if (
+        containerHeight &&
+        innerContainerHt &&
+        maxHeight > innerContainerHt
+      ) {
+        setContainerHeight(0)
+      }
+    }
+  }, [containerHeight])
+
+  useEffect(() => {
+    if (typeof window !== undefined && isDesktop) {
+      updateHeight()
+    }
+  }, [childCount, isDesktop, updateHeight])
+
   return isDesktop ? (
     <DialogTrigger onOpenChange={setOverflowClip}>
       <Trigger rooms={rooms} className={styles.triggerDesktop} />
-      <Popover placement="bottom start" offset={36}>
+      <Popover
+        placement="bottom start"
+        offset={36}
+        style={containerHeight ? { overflow: "auto" } : {}}
+      >
         <Dialog className={styles.pickerContainerDesktop}>
-          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+          {({ close }) => (
+            <PickerForm
+              rooms={rooms}
+              onClose={close}
+              isOverflowed={!!containerHeight}
+            />
+          )}
         </Dialog>
       </Popover>
     </DialogTrigger>

components/TempDesignSystem/Popover/index.tsx

@@ -17,9 +17,10 @@ import styles from "./popover.module.css"
 export default function Popover({
   triggerContent,
   children,
+  isNestedPopover = false,
   ...props
 }: PopoverProps) {
-  const setOverflowVisible = useSetOverFlowVisibleOnRA()
+  const setOverflowVisible = useSetOverFlowVisibleOnRA(isNestedPopover)
 
   return (
     <DialogTrigger onOpenChange={setOverflowVisible}>

components/TempDesignSystem/Popover/popover.ts

@@ -3,4 +3,5 @@ import type { PopoverProps as RAPopoverProps } from "react-aria-components"
 export interface PopoverProps extends Omit<RAPopoverProps, "children"> {
   triggerContent: React.ReactNode
   children: React.ReactNode
+  isNestedPopover?: boolean
 }

components/TempDesignSystem/Select/index.tsx

@@ -38,9 +38,10 @@ export default function Select({
   maxHeight,
   showRadioButton = false,
   discreet = false,
+  isNestedInModal = false,
 }: SelectProps) {
   const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
-  const setOverflowVisible = useSetOverflowVisibleOnRA()
+  const setOverflowVisible = useSetOverflowVisibleOnRA(isNestedInModal)
 
   function setRef(node: SelectPortalContainerArgs) {
     if (node) {

components/TempDesignSystem/Select/select.ts

@@ -12,6 +12,7 @@ export interface SelectProps
   maxHeight?: number
   showRadioButton?: boolean
   discreet?: boolean
+  isNestedInModal?: boolean
 }
 
 export type SelectPortalContainer = HTMLDivElement | undefined

hooks/useSetOverflowVisibleOnRA.ts

@@ -1,8 +1,8 @@
-export default function useSetOverflowVisibleOnRA() {
+export default function useSetOverflowVisibleOnRA(isNestedInModal: boolean) {
   function setOverflowVisible(isOpen: boolean) {
     if (isOpen) {
       document.body.style.overflow = "visible"
-    } else {
+    } else if (!isNestedInModal) {
       document.body.style.overflow = ""
     }
   }