fix(BOOK-146): Added scrolling possibility on Sidepeek dialog instead of content to support keyboard scrolling

Approved-by: Bianca Widstam

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css

@@ -5,14 +5,15 @@
 
 .stickyHeading {
   position: sticky;
-  top: 0;
+  /* Position below the SidePeek header using the CSS variable set by the SidePeek component including some extra spacing */
+  top: calc(var(--sidepeek-header-height, 0px) + var(--Space-x4));
   display: flex;
   gap: var(--Space-x1);
   color: var(--Text-Interactive-Default);
   align-items: center;
-}
+
-/* Hack to make it look like the heading has a background which covers the top of the sidepeek */
+  /* Hack to make it look like the heading has a background which covers the top of the sidepeek */
-.stickyHeading::before {
+  &::before {
     content: "";
     position: absolute;
     margin-top: calc(-1 * var(--Space-x4));
@@ -21,6 +22,7 @@
     width: 100%;
     top: 0;
     bottom: -16px;
+  }
 }
 
 .content {

packages/design-system/lib/components/Button/button.module.css

@@ -16,10 +16,11 @@
   &[data-pending] {
     cursor: progress;
   }
-}
+
-.button:focus-visible {
+  &:focus-visible {
-  outline: 2px auto -webkit-focus-ring-color; /*color should probably be cutomized for each variant later on*/
+    outline: 2px auto -webkit-focus-ring-color;
-  outline-offset: 1px;
+    outline-offset: 4px;
+  }
 }
 
 .size-large {
@@ -179,6 +180,7 @@
 .variant-text.no-wrapping {
   padding: var(--Space-x025) 0;
   border-width: 0;
+  border-radius: 0;
 }
 
 .variant-text.color-inverted {

packages/design-system/lib/components/ButtonLink/buttonLink.module.css

@@ -7,9 +7,9 @@
   align-items: center;
   justify-content: center;
   gap: var(--Space-x05);
-}
 
-.buttonLink:focus-visible {
+  &:focus-visible {
     outline: 2px auto -webkit-focus-ring-color;
-  outline-offset: 1px;
+    outline-offset: 4px;
+  }
 }

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useContext, useRef } from 'react'
+import { useCallback, useContext, useRef } from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 import { IconButton } from '../IconButton'
 import { MaterialIcon } from '../Icons/MaterialIcon'
@@ -10,6 +10,7 @@ import { SidePeekContext } from './SidePeekContext'
 
 import SidePeekSEO from './SidePeekSEO'
 
+import { debounce } from '@scandic-hotels/common/utils/debounce'
 import styles from './sidePeek.module.css'
 
 interface SidePeekProps {
@@ -31,8 +32,33 @@ export default function SidePeek({
   closeLabel,
 }: React.PropsWithChildren<SidePeekProps>) {
   const rootDiv = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
 
   const context = useContext(SidePeekContext)
+
+  const updateHeightRefCallback = useCallback((node: HTMLElement | null) => {
+    if (node) {
+      const debouncedUpdate = debounce(([entry]: ResizeObserverEntry[]) => {
+        const height = entry.contentRect.height
+
+        dialogRef.current?.style.setProperty(
+          '--sidepeek-header-height',
+          `${height}px`
+        )
+      }, 100)
+
+      const observer = new ResizeObserver(debouncedUpdate)
+      observer.observe(node)
+
+      return () => {
+        observer.unobserve(node)
+        observer.disconnect()
+        dialogRef.current?.style.removeProperty('--sidepeek-header-height')
+      }
+    }
+  }, [])
+
   function onClose() {
     const closeHandler = handleClose || context?.handleClose
     closeHandler?.(false)
@@ -51,9 +77,20 @@ export default function SidePeek({
           isDismissable
         >
           <Modal className={styles.modal}>
-            <Dialog className={styles.dialog} aria-label={title}>
+            <Dialog
+              ref={dialogRef}
+              className={styles.dialog}
+              aria-label={title}
+            >
               <aside className={styles.aside}>
-                <header className={styles.header}>
+                <header
+                  ref={(node) => {
+                    headerRef.current = node
+                    return updateHeightRefCallback(node)
+                  }}
+                  className={styles.header}
+                >
+                  <div className={styles.headerContent}>
                     {title ? (
                       <Typography variant="Title/md">
                         <h2 className={styles.heading}>{title}</h2>
@@ -70,6 +107,7 @@ export default function SidePeek({
                         color="Icon/Interactive/Default"
                       />
                     </IconButton>
+                  </div>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
               </aside>

packages/design-system/lib/components/SidePeek/sidePeek.module.css

@@ -1,10 +1,7 @@
 .overlay {
   --sidepeek-desktop-width: 560px;
   position: fixed;
-  top: 0;
+  inset: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
   z-index: var(--sidepeek-z-index);
   background-color: var(--UI-Opacity-Almost-Black-30);
 }
@@ -17,40 +14,47 @@
   width: 100%;
   height: 100vh;
   background-color: var(--Background-Primary);
-  z-index: var(--sidepeek-z-index);
-  outline: none;
-}
 
-.modal[data-entering] {
+  &[data-entering] {
     animation: slide-in 250ms;
-}
+  }
 
-.modal[data-exiting] {
+  &[data-exiting] {
     animation: slide-in 250ms reverse;
+  }
 }
 
 .dialog {
   height: 100%;
   outline: none;
+  overflow: auto;
+  --sidepeek-header-height: auto;
 }
 
 .aside {
   position: relative;
   display: grid;
   grid-template-rows: min-content auto;
-  height: 100dvh;
+  min-height: 100dvh;
 }
 
 .header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--Background-Primary);
+}
+
+.headerContent {
   display: flex;
   justify-content: flex-end;
   border-bottom: 1px solid var(--Base-Border-Subtle);
   align-items: flex-start;
   padding: var(--Space-x4);
-}
 
-.header:has(.heading) {
+  &:has(.heading) {
     justify-content: space-between;
+  }
 }
 
 .heading {
@@ -61,15 +65,12 @@
 
 .sidePeekContent {
   padding: var(--Space-x4);
-  overflow-y: auto;
 }
 
 @media screen and (min-width: 1367px) {
   .modal {
-    top: 0;
+    right: 0;
-    right: 0px;
     width: var(--sidepeek-desktop-width);
-    height: 100vh;
   }
 }