feat(SW-1883): Added links to the filter values on the destination pages

Approved-by: Fredrik Thorsson

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

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

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

@@ -1,5 +1,6 @@
 "use client"
 
+import Link from "next/link"
 import { useRouter } from "next/navigation"
 import {
   Dialog,
@@ -60,6 +61,7 @@ export default function DestinationFilterAndSort({
     resetPendingValues: state.actions.resetPendingValues,
     setIsLoading: state.actions.setIsLoading,
   }))
+  const { facilityFilters, surroundingsFilters } = filters
   const alertHeading =
     listType === "city"
       ? intl.formatMessage({ id: "No matching locations found" })
@@ -189,6 +191,22 @@ export default function DestinationFilterAndSort({
           </Modal>
         </ModalOverlay>
       </DialogTrigger>
+
+      {/* This section is added to the DOM for SEO purposes. The filters are linkable and should be indexable */}
+      <nav className={styles.visuallyHidden}>
+        <ul>
+          {facilityFilters.map((filter) => (
+            <li key={`filter-${filter.slug}`}>
+              <Link href={`${basePath}/${filter.slug}`}>{filter.name}</Link>
+            </li>
+          ))}
+          {surroundingsFilters.map((filter) => (
+            <li key={`filter-${filter.slug}`}>
+              <Link href={`${basePath}/${filter.slug}`}>{filter.name}</Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
     </>
   )
 }

apps/scandic-web/providers/DestinationDataProvider/Content.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useParams } from "next/navigation"
 import { useEffect } from "react"