Fix/SW-1563 accessibility

* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component
* fix(SW-1563): Added buttons around clickable images and changed to design system components
* fix(SW-1563): Renamed variants to match Figma
* fix(SW-1563): Renamed AriaButton to ButtonRAC

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

apps/scandic-web/components/Lightbox/FullView/index.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import { AnimatePresence, motion } from "framer-motion"
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import Image from "@/components/Image"
+
+import styles from "./fullView.module.css"
+
+import type { FullViewProps } from "@/types/components/lightbox/lightbox"
+
+export default function FullView({
+  image,
+  onClose,
+  onNext,
+  onPrev,
+  currentIndex,
+  totalImages,
+  hideLabel,
+}: FullViewProps) {
+  const intl = useIntl()
+  const [animateLeft, setAnimateLeft] = useState(true)
+
+  function handleSwipe(offset: number) {
+    if (offset > 30) onPrev()
+    if (offset < -30) onNext()
+  }
+
+  function handleNext() {
+    setAnimateLeft(true)
+    onNext()
+  }
+
+  function handlePrev() {
+    setAnimateLeft(false)
+    onPrev()
+  }
+
+  const variants = {
+    initial: (animateLeft: boolean) => ({
+      opacity: 0,
+      x: animateLeft ? 300 : -300,
+    }),
+    animate: { opacity: 1, x: 0 },
+    exit: (animateLeft: boolean) => ({
+      opacity: 0,
+      x: animateLeft ? -300 : 300,
+    }),
+  }
+
+  return (
+    <div className={styles.fullViewContainer}>
+      <IconButton
+        theme="Inverted"
+        style="Muted"
+        className={styles.closeButton}
+        onPress={onClose}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Close",
+        })}
+      >
+        <MaterialIcon icon="close" color="CurrentColor" size={24} />
+      </IconButton>
+      <div className={styles.header}>
+        <Typography variant="Tag/sm">
+          <span className={styles.imageCount}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {`${currentIndex + 1} / ${totalImages}`}
+          </span>
+        </Typography>
+      </div>
+      <div className={styles.imageContainer}>
+        <AnimatePresence initial={false} custom={animateLeft}>
+          <motion.div
+            key={image.src}
+            custom={animateLeft}
+            variants={variants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{ duration: 0.3 }}
+            className={styles.imageWrapper}
+            drag="x"
+            onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
+          >
+            <Image
+              alt={image.alt}
+              fill
+              sizes="(min-width: 1500px) 1500px, 100vw"
+              src={image.src}
+              className={styles.image}
+            />
+
+            {image.caption && !hideLabel ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p className={styles.footer}>{image.caption}</p>
+              </Typography>
+            ) : null}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      <motion.button
+        className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
+        onClick={handlePrev}
+      >
+        <MaterialIcon
+          icon="arrow_back"
+          color="CurrentColor"
+          className={styles.leftTransformIcon}
+        />
+      </motion.button>
+      <motion.button
+        className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
+        onClick={handleNext}
+      >
+        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
+      </motion.button>
+    </div>
+  )
+}