feat(SW-1884): Always render sidepeek contents, not just during SSR

Approved-by: Michael Zetterberg

apps/scandic-web/app/globals.css

@@ -69,6 +69,19 @@ ul {
   margin-block-end: 0;
 }
 
+/* From Tailwind */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 @media screen and (min-width: 768px) {
   :root {
     --max-width-spacing: calc(var(--Layout-Tablet-Margin-Margin-min) * 2);

apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css

@@ -74,10 +74,6 @@
   padding: 0;
 }
 
-.visuallyHidden {
-  display: none;
-}
-
 @media screen and (max-width: 767px) {
   .overlay {
     height: var(--visual-viewport-height);

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -194,7 +194,7 @@ export default function DestinationFilterAndSort({
       </DialogTrigger>
 
       {/* This section is added to the DOM for SEO purposes. The filters are linkable and should be indexable */}
-      <nav className={styles.visuallyHidden}>
+      <nav className="sr-only">
         <ul>
           {facilityFilters.map((filter) => (
             <li key={`filter-${filter.slug}`}>

apps/scandic-web/components/TempDesignSystem/SidePeek/SidePeekSEO.tsx

@@ -0,0 +1,16 @@
+import type { SidePeekProps } from "./sidePeek"
+
+// Sidepeeks generally have important content that should be indexed by search engines.
+// The content is hidden behind a modal, but it is still important for SEO.
+// This component is used to provide SEO information for the sidepeek content.
+export default function SidePeekSEO({
+  title,
+  children,
+}: React.PropsWithChildren<Pick<SidePeekProps, "title">>) {
+  return (
+    <div className="sr-only">
+      <h2>{title}</h2>
+      {children}
+    </div>
+  )
+}

apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { useIsSSR } from "@react-aria/ssr"
 import { useContext, useRef } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
@@ -11,12 +10,13 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"
 
 import Button from "../Button"
+import SidePeekSEO from "./SidePeekSEO"
 
 import styles from "./sidePeek.module.css"
 
 import type { SidePeekProps } from "./sidePeek"
 
-function SidePeek({
+export default function SidePeek({
   children,
   title,
   contentKey,
@@ -24,7 +24,6 @@ function SidePeek({
   isOpen,
   openInRoot = false,
 }: React.PropsWithChildren<SidePeekProps>) {
-  const isSSR = useIsSSR()
   const intl = useIntl()
   const rootDiv = useRef<HTMLDivElement>(null)
 
@@ -34,16 +33,8 @@ function SidePeek({
     closeHandler && closeHandler(false)
   }
 
-  if (isSSR) {
-    return (
-      <div className={styles.visuallyHidden}>
-        <h2>{title}</h2>
-        {children}
-      </div>
-    )
-  }
-
   return (
+    <>
       <div ref={openInRoot ? null : rootDiv}>
         <ModalOverlay
           UNSTABLE_portalContainer={rootDiv.current || undefined}
@@ -69,7 +60,10 @@ function SidePeek({
                     intent="text"
                     onPress={onClose}
                   >
-                  <MaterialIcon icon="close" color="Icon/Interactive/Default" />
+                    <MaterialIcon
+                      icon="close"
+                      color="Icon/Interactive/Default"
+                    />
                   </Button>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>
@@ -78,7 +72,8 @@ function SidePeek({
           </Modal>
         </ModalOverlay>
       </div>
+
+      <SidePeekSEO title={title}>{children}</SidePeekSEO>
+    </>
   )
 }
-
-export default SidePeek

apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -21,12 +21,6 @@
   }
 }
 
-.visuallyHidden {
-  position: absolute;
-  opacity: 0;
-  visibility: hidden;
-}
-
 .overlay {
   position: fixed;
   top: 0;