Merged in refactor/SW-2476-use-react-aria-radio-group-for-payment-options (pull request #1849)

Refactor(SW-2177): Use react aria RadioGroup & Radio for payment options

* fix(SW-SW-2177): enhance accessibility for payment options

* Added keyboard navigation support to payment options.
* Updated CSS to improve focus styles for payment option labels.

* refactor: use RadioGroup & Radio from react aria for payment options

* refactor(SW-2177): replace setValue and watch with useController for payment method handling

* fix(SW-2177): remove comment and use cx for styles on PaymentOption

* fix(SW-2177): Add keyboard focus indicator to payment option


Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MySavedCards/index.tsx

@@ -1,13 +1,12 @@
 import { useIntl } from "react-intl"
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
 import {
   PAYMENT_METHOD_TITLES,
   type PaymentMethodEnum,
 } from "@/constants/booking"
 
 import PaymentOption from "../PaymentOption"
+import PaymentOptionsGroup from "../PaymentOptionsGroup"
 
 import styles from "./mySavedCards.module.css"
 
@@ -19,21 +18,20 @@ interface MySavedCardsProps {
 
 export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
   const intl = useIntl()
+  const mySavedCardsLabel = intl.formatMessage({
+    defaultMessage: "MY SAVED CARDS",
+  })
 
   return (
     <section className={styles.section}>
-      <Typography variant="Title/Overline/sm">
-        <h4>
-          {intl.formatMessage({
-            defaultMessage: "MY SAVED CARDS",
-          })}
-        </h4>
-      </Typography>
-      <div className={styles.paymentOptionContainer}>
+      <PaymentOptionsGroup
+        name="paymentMethod"
+        label={mySavedCardsLabel}
+        className={styles.paymentOptionContainer}
+      >
         {savedCreditCards?.map((savedCreditCard) => (
           <PaymentOption
             key={savedCreditCard.id}
-            name="paymentMethod"
             value={savedCreditCard.id}
             label={
               PAYMENT_METHOD_TITLES[
@@ -43,7 +41,7 @@ export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
             cardNumber={savedCreditCard.truncatedNumber}
           />
         ))}
-      </div>
+      </PaymentOptionsGroup>
     </section>
   )
 }