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/Confirm/index.tsx

@@ -17,6 +17,7 @@ import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
 
 import MySavedCards from "../Payment/MySavedCards"
 import PaymentOption from "../Payment/PaymentOption"
+import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
 import TermsAndConditions from "../Payment/TermsAndConditions"
 
 import styles from "./confirm.module.css"
@@ -123,26 +124,25 @@ export default function ConfirmBooking({
         {savedCreditCards?.length && guarantee ? (
           <MySavedCards savedCreditCards={savedCreditCards} />
         ) : null}
-        {guarantee && (
-          <>
-            {savedCreditCards?.length ? (
-              <Typography variant="Title/Overline/sm">
-                <h4>
-                  {intl.formatMessage({
+        {guarantee ? (
+          <PaymentOptionsGroup
+            name="paymentMethod"
+            label={
+              savedCreditCards?.length
+                ? intl.formatMessage({
                     defaultMessage: "OTHER",
-                  })}
-                </h4>
-              </Typography>
-            ) : null}
+                  })
+                : undefined
+            }
+          >
             <PaymentOption
-              name="paymentMethod"
               value={PaymentMethodEnum.card}
               label={intl.formatMessage({
                 defaultMessage: "Credit card",
               })}
             />
-          </>
-        )}
+          </PaymentOptionsGroup>
+        ) : null}
       </div>
       <div className={styles.checkboxContainer}>
         <TermsAndConditions />