Merged in fix/book-115-hidden-focus-indicators (pull request #2925)

Fix/book 115 hidden focus indicators

* added focus ring to "how it works" text and close button in modal

* fix(BOOK-115): added focus ring to Hotel Sidepeek close button

* fix(BOOK-115): enabled selecting ancillaries with keyboard nav

* fix(BOOK-115): added focus indicator to "View and print receipt" in Manage Stay

* fix(BOOK-105 & BOOK-115): combined the two radio groups in payment selection to one, fixes focus indicator issue

* fix(BOOK-115): added focus indicator to shortcut links

* fix(BOOK-115): updated ancillaries keyboard selection

* fix(BOOK-115): removed tabIndex from Link component

* fix(BOOK-115): fixed single payment radio button not focusable

* fix(BOOK-115): updated  to onKeyDown

* added id to "credit card"

* removed toUpperCase() on lables

* removed brackets

* moved the focus indicator to the DS Button component

* removed !important from ButtonLink css

* changed <label> to <fieldset> and <legend> and added aria-label to PaymentOptionGroup

* removed css class from sidepeek that was previously removed

* reverted changes and synced Guarantee radiogroup with Payment radiogroup to use same semantics

* removed duplicate label

* removed old sub heading


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -146,39 +146,16 @@ export default function ConfirmationStep({
                     "By adding a card you also guarantee your room booking for late arrival.",
                 })}
               />
-              {savedCreditCards?.length ? (
-                <SelectPaymentMethod
-                  paymentMethods={savedCreditCards.map((x) => ({
-                    ...x,
-                    cardType: x.cardType as PaymentMethodEnum,
-                  }))}
-                  onChange={(method) => {
-                    trackUpdatePaymentMethod({ method })
-                  }}
-                  formName={"paymentMethod"}
-                />
-              ) : null}
-              <PaymentOptionsGroup
-                name="paymentMethod"
-                label={
-                  savedCreditCards?.length
-                    ? intl
-                        .formatMessage({
-                          id: "common.other",
-                          defaultMessage: "Other",
-                        })
-                        .toUpperCase()
-                    : undefined
-                }
-              >
-                <PaymentOption
-                  value={PaymentMethodEnum.card}
-                  label={intl.formatMessage({
-                    id: "common.creditCard",
-                    defaultMessage: "Credit card",
-                  })}
-                />
-              </PaymentOptionsGroup>
+              <SelectPaymentMethod
+                paymentMethods={(savedCreditCards ?? []).map((card) => ({
+                  ...card,
+                  cardType: card.cardType as PaymentMethodEnum,
+                }))}
+                onChange={(method) => {
+                  trackUpdatePaymentMethod({ method })
+                }}
+                formName={"paymentMethod"}
+              />
             </>
           )}
         </>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/WrappedAncillaryCard/index.tsx

@@ -20,11 +20,18 @@ export default function WrappedAncillaryCard({
 
   return (
     <div
+      tabIndex={0}
       role="button"
       onClick={() => {
         selectAncillary(ancillary)
         trackViewAncillary(ancillary, booking)
       }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          selectAncillary(ancillary)
+          trackViewAncillary(ancillary, booking)
+        }
+      }}
     >
       <AncillaryCard ancillary={ancillaryWithoutDescription} />
     </div>