fix(SW-2933): Making the hotels/city listing render correct for SEO purposes

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingSkeleton.tsx

@@ -15,7 +15,9 @@ export default function CityListingSkeleton() {
       </div>
       <ul className={styles.cityList}>
         {Array.from({ length: 3 }).map((_, index) => (
-          <CityListingItemSkeleton key={index} />
+          <li key={index}>
+            <CityListingItemSkeleton />
+          </li>
         ))}
       </ul>
     </section>

apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx

@@ -3,12 +3,13 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import CityListingItem from "./CityListingItem"
@@ -35,15 +36,17 @@ export default function CityListing() {
   ) : (
     <section className={styles.container} ref={scrollRef}>
       <div className={styles.listHeader}>
-        <Subtitle type="two">
-          {intl.formatMessage(
-            {
-              defaultMessage:
-                "{count, plural, one {# destination} other {# destinations}}",
-            },
-            { count: activeCities.length }
-          )}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <h2>
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  "{count, plural, one {# destination} other {# destinations}}",
+              },
+              { count: activeCities.length }
+            )}
+          </h2>
+        </Typography>
         <DestinationFilterAndSort listType="city" />
       </div>
       {activeCities.length === 0 ? (

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -61,14 +61,14 @@ export default async function DestinationCityPage({
             />
           ) : (
             <div className={styles.pageContainer}>
-              <header className={styles.header}>
+              <div className={styles.header}>
                 <Suspense fallback={<BreadcrumbsSkeleton />}>
                   <Breadcrumbs />
                 </Suspense>
                 {images?.length ? (
                   <TopImages images={images} destinationName={city.name} />
                 ) : null}
-              </header>
+              </div>
               <main className={styles.mainContent}>
                 <HotelListing />
                 {blocks && <Blocks blocks={blocks} />}

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -60,7 +60,7 @@ export default async function DestinationCountryPage({
             />
           ) : (
             <div className={styles.pageContainer}>
-              <header className={styles.header}>
+              <div className={styles.header}>
                 <Suspense fallback={<BreadcrumbsSkeleton />}>
                   <Breadcrumbs />
                 </Suspense>
@@ -70,7 +70,7 @@ export default async function DestinationCountryPage({
                     destinationName={translatedCountry}
                   />
                 ) : null}
-              </header>
+              </div>
               <main className={styles.mainContent}>
                 <CityListing />
                 {blocks && <Blocks blocks={blocks} />}

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingSkeleton.tsx

@@ -15,7 +15,9 @@ export default function HotelListingSkeleton() {
       </div>
       <ul className={styles.hotelList}>
         {Array.from({ length: 3 }).map((_, index) => (
-          <HotelListingItemSkeleton key={index} />
+          <li key={index}>
+            <HotelListingItemSkeleton />
+          </li>
         ))}
       </ul>
     </section>

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
@@ -13,7 +14,6 @@ import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelListingItem from "./HotelListingItem"
@@ -48,14 +48,17 @@ export default function HotelListing() {
   ) : (
     <section className={styles.container} ref={scrollRef}>
       <div className={styles.listHeader}>
-        <Subtitle type="two">
-          {intl.formatMessage(
-            {
-              defaultMessage: "{count, plural, one {# hotel} other {# hotels}}",
-            },
-            { count: activeHotels.length }
-          )}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <h2>
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  "{count, plural, one {# hotel} other {# hotels}}",
+              },
+              { count: activeHotels.length }
+            )}
+          </h2>
+        </Typography>
         <div className={styles.cta}>
           {mapUrl && (
             <Button