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/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -4,6 +4,7 @@ import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -115,17 +116,18 @@ export default function SummaryUI({
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nightsMsg})
         </Body>
-        <Button
+        <IconButton
           onPress={handleToggleSummary}
           className={styles.chevronButton}
-          variant="Icon"
+          theme="Black"
+          style="Muted"
         >
           <MaterialIcon
             icon="keyboard_arrow_down"
             size={20}
             color="CurrentColor"
           />
-        </Button>
+        </IconButton>
       </header>
       <Divider color="primaryLightSubtle" />
       {rooms.map(({ room }, idx) => {

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -3,6 +3,7 @@ import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -88,13 +89,13 @@ export default function Summary({
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
-        <Button onPress={toggleSummaryOpen} variant="Icon">
+        <IconButton onPress={toggleSummaryOpen} theme="Black" style="Muted">
           <MaterialIcon
             icon="keyboard_arrow_down"
             size={20}
             color="CurrentColor"
           />
-        </Button>
+        </IconButton>
       </header>
       <Divider color="primaryLightSubtle" />
       {rooms.map((room, idx) => {

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx

@@ -7,8 +7,8 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { Button } from "@scandic-hotels/design-system/Button"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
+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"
 
@@ -39,9 +39,13 @@ export default function RoomPackageFilterModal() {
                   {intl.formatMessage({ defaultMessage: "Special needs" })}
                 </h3>
               </Typography>
-              <Button variant="Icon" onPress={() => setIsOpen(false)}>
+              <IconButton
+                theme="Black"
+                style="Muted"
+                onPress={() => setIsOpen(false)}
+              >
                 <MaterialIcon icon="close" size={24} color="CurrentColor" />
-              </Button>
+              </IconButton>
             </div>
             <Form close={() => setIsOpen(false)} />
           </Dialog>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Button as AriaButton } from "react-aria-components"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useMediaQuery } from "usehooks-ts"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -69,12 +69,12 @@ export default function RoomPackageFilter() {
                 color="CurrentColor"
               />
               {pkg.description}
-              <AriaButton
+              <ButtonRAC
                 onPress={() => deleteSelectedPackage(pkg.code)}
                 className={styles.removeButton}
               >
                 <MaterialIcon icon="close" size={16} color="CurrentColor" />
-              </AriaButton>
+              </ButtonRAC>
             </span>
           </Typography>
         ))}