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/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css

@@ -20,3 +20,8 @@
 .listItem:last-child .link {
   border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md);
 }
+
+.link:focus-visible {
+  outline: 2px auto -webkit-focus-ring-color;
+  outline-offset: -4px;
+}

apps/scandic-web/components/Carousel/carousel.module.css

@@ -17,6 +17,10 @@
   min-width: 0;
 }
 
+.item:focus-visible {
+  outline: 2px auto -webkit-focus-ring-color;
+  outline-offset: 1px;
+}
 .buttonWrapper {
   position: absolute;
   top: 50%;

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>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -12,8 +12,6 @@ import { privacyPolicyRoutes } from "@scandic-hotels/common/constants/routes/pri
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 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 { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -155,42 +153,17 @@ export default function Form() {
         id="guarantee"
         onSubmit={methods.handleSubmit(handleGuaranteeLateArrival)}
       >
-        {savedCreditCards?.length ? (
-          <SelectPaymentMethod
-            formName="paymentMethod"
-            paymentMethods={savedCreditCards.map((x) => ({
-              ...x,
-              cardType: x.type as PaymentMethodEnum,
-            }))}
-            onChange={(method) => {
-              trackUpdatePaymentMethod({ method })
-            }}
-          />
-        ) : null}
-        <PaymentOptionsGroup
-          name="paymentMethod"
-          label={
-            savedCreditCards?.length
-              ? intl
-                  .formatMessage({
-                    id: "common.other",
-                    defaultMessage: "Other",
-                  })
-                  .toUpperCase()
-              : undefined
-          }
+        <SelectPaymentMethod
+          paymentMethods={(savedCreditCards ?? []).map((card) => ({
+            ...card,
+            cardType: card.cardType as PaymentMethodEnum,
+          }))}
           onChange={(method) => {
             trackUpdatePaymentMethod({ method })
           }}
-        >
-          <PaymentOption
-            value={PaymentMethodEnum.card}
-            label={intl.formatMessage({
-              id: "common.creditCard",
-              defaultMessage: "Credit card",
-            })}
-          />
-        </PaymentOptionsGroup>
+          formName="paymentMethod"
+        />
+
         <div className={styles.termsAndConditions}>
           <Checkbox className={styles.checkbox} name="termsAndConditions">
             <Typography variant="Body/Supporting text (caption)/smRegular">

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ViewAndPrintReceipt/index.tsx

@@ -17,6 +17,7 @@ import styles from "./view.module.css"
 export default function ViewAndPrintReceipt() {
   const intl = useIntl()
   const lang = useLang()
+
   const canDownloadInvoice = useMyStayStore(
     (state) =>
       !state.bookedRoom.isCancelled &&

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ViewAndPrintReceipt/view.module.css

@@ -5,3 +5,7 @@
   gap: var(--Space-x1);
   padding: var(--Space-x05) 0;
 }
+
+.download:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+}