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

packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css

@@ -38,6 +38,10 @@
   justify-self: flex-end;
   outline: none;
 }
+.infoButton:focus-visible {
+  outline: 2px auto -webkit-focus-ring-color;
+  outline-offset: 1px;
+}
 
 .overlay {
   align-items: center;

packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx

@@ -9,12 +9,9 @@ import {
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
-import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
 import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -22,6 +19,7 @@ import { trackUpdatePaymentMethod } from "@scandic-hotels/tracking/payment"
 
 import styles from "./guarantee.module.css"
 
+import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import type { CreditCard } from "@scandic-hotels/trpc/types/user"
 
 interface GuaranteeProps {
@@ -112,9 +110,10 @@ export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
           </DialogTrigger>
         </div>
       </Checkbox>
-      {savedCreditCards?.length && guarantee ? (
+
+      {guarantee && (
         <SelectPaymentMethod
-          paymentMethods={savedCreditCards.map((card) => ({
+          paymentMethods={(savedCreditCards ?? []).map((card) => ({
             ...card,
             cardType: card.cardType as PaymentMethodEnum,
           }))}
@@ -123,30 +122,7 @@ export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
           }}
           formName={"paymentMethod"}
         />
-      ) : null}
-      {guarantee ? (
-        <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>
-      ) : null}
+      )}
     </div>
   )
 }