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/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -14,6 +14,7 @@ import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
 import MySavedCards from "@/components/HotelReservation/EnterDetails/Payment/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/EnterDetails/Payment/PaymentOption"
+import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
 import Alert from "@/components/TempDesignSystem/Alert"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
@@ -117,14 +118,15 @@ export default function ConfirmationStep({
             </p>
           </Typography>
           {guaranteeInfo ? (
-            <PaymentOption
-              name="paymentMethod"
-              value={PaymentMethodEnum.card}
-              cardNumber={guaranteeInfo.maskedCard.slice(-4)}
-              label={intl.formatMessage({
-                defaultMessage: "Credit card",
-              })}
-            />
+            <PaymentOptionsGroup name="paymentMethod">
+              <PaymentOption
+                value={PaymentMethodEnum.card}
+                cardNumber={guaranteeInfo.maskedCard.slice(-4)}
+                label={intl.formatMessage({
+                  defaultMessage: "Credit card",
+                })}
+              />
+            </PaymentOptionsGroup>
           ) : (
             <>
               <Alert
@@ -134,27 +136,26 @@ export default function ConfirmationStep({
                     "By adding a card you also guarantee your room booking for late arrival.",
                 })}
               />
-              {savedCreditCards?.length && (
+              {savedCreditCards?.length ? (
                 <MySavedCards savedCreditCards={savedCreditCards} />
-              )}
-              <>
-                {savedCreditCards?.length && (
-                  <Typography variant="Title/Overline/sm">
-                    <h4>
-                      {intl.formatMessage({
+              ) : null}
+              <PaymentOptionsGroup
+                name="paymentMethod"
+                label={
+                  savedCreditCards?.length
+                    ? intl.formatMessage({
                         defaultMessage: "OTHER",
-                      })}
-                    </h4>
-                  </Typography>
-                )}
+                      })
+                    : undefined
+                }
+              >
                 <PaymentOption
-                  name="paymentMethod"
                   value={PaymentMethodEnum.card}
                   label={intl.formatMessage({
                     defaultMessage: "Credit card",
                   })}
                 />
-              </>
+              </PaymentOptionsGroup>
             </>
           )}
         </>

apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/index.tsx

@@ -32,6 +32,7 @@ import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
 
 import MySavedCards from "../../EnterDetails/Payment/MySavedCards"
 import PaymentOption from "../../EnterDetails/Payment/PaymentOption"
+import PaymentOptionsGroup from "../../EnterDetails/Payment/PaymentOptionsGroup"
 import { type GuaranteeFormData, paymentSchema } from "./schema"
 
 import styles from "./guaranteeLateArrival.module.css"
@@ -135,22 +136,25 @@ export default function GuaranteeLateArrival({
               })}
             </Caption>
             {savedCreditCards?.length ? (
-              <>
-                <MySavedCards savedCreditCards={savedCreditCards} />
-                <Body color="uiTextHighContrast" textTransform="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "OTHER",
-                  })}
-                </Body>
-              </>
+              <MySavedCards savedCreditCards={savedCreditCards} />
             ) : null}
-            <PaymentOption
+            <PaymentOptionsGroup
               name="paymentMethod"
-              value={PaymentMethodEnum.card}
-              label={intl.formatMessage({
-                defaultMessage: "Credit card",
-              })}
-            />
+              label={
+                savedCreditCards?.length
+                  ? intl.formatMessage({
+                      defaultMessage: "OTHER",
+                    })
+                  : undefined
+              }
+            >
+              <PaymentOption
+                value={PaymentMethodEnum.card}
+                label={intl.formatMessage({
+                  defaultMessage: "Credit card",
+                })}
+              />
+            </PaymentOptionsGroup>
             <div className={styles.termsAndConditions}>
               <Typography variant="Body/Supporting text (caption)/smRegular">
                 <p>