Merged in feat/BOOK-119-accessibility-replace-radiogroup (pull request #3081)

feat(BOOK-119): replace radio group on select rate with buttons and make them accessible * feat(BOOK-119): replace radio group on select rate with buttons and make them accessible * feat(BOOK-119): update roomNR * feat(BOOK-119): update onpress and buttonOverlay name change Approved-by: Erik Tiekstra
2025-11-06 11:46:59 +00:00
parent 0a5d3ef7c3
commit 873174dcc3
11 changed files with 483 additions and 436 deletions
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -96,7 +96,24 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
      selected: !!selectedRate && !isActiveRoom,
    })
    return (
-      <div className={styles.roomContainer} data-multiroom="true">
+      <div
+        className={styles.roomContainer}
+        data-multiroom="true"
+        aria-labelledby={`room-${roomNr}-heading`}
+        role="region"
+      >
+        <h2 id={`room-${roomNr}-heading`} className="sr-only">
+          {intl.formatMessage(
+            {
+              id: "booking.roomIndex",
+              defaultMessage: "Room {roomIndex}",
+            },
+            {
+              roomIndex: roomNr,
+            }
+          )}
+        </h2>
+
        <div className={styles.header}>
          {selectedRate && !isActiveRoom ? null : (
            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx
@@ -258,7 +258,7 @@ function Inner({
            }
          : undefined
      }
-      name={`rateCode-${roomNr}-${product.public.rateCode}`}
+      id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
      paymentTerm={rateTitles[product.rate].paymentTerm}
      rate={{
        label: isMainRoomAndLoggedIn
@@ -287,7 +287,6 @@ function Inner({
          : undefined
      }
      rateTermDetails={rateTermDetails}
-      value={product.public.rateCode}
    />
  )
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx
@@ -64,6 +64,8 @@ function InnerCode({
    isRateSelected,
  } = useSelectRateContext()

+  const roomNr = roomIndex + 1
+
  function handleSelectRate(rateCode: string) {
    selectRate({ roomIndex, rateCode, roomTypeCode, bookingCode })
  }
@@ -86,7 +88,7 @@ function InnerCode({
    return (
      <CorporateChequeCode
        codeProduct={codeProduct}
-        roomIndex={roomIndex}
+        roomNr={roomNr}
        roomTypeCode={roomTypeCode}
        bannerText={bannerText}
        packagesSum={pkgsSum}
@@ -101,7 +103,7 @@ function InnerCode({
    return (
      <VoucherCode
        codeProduct={codeProduct}
-        roomIndex={roomIndex}
+        roomNr={roomNr}
        roomTypeCode={roomTypeCode}
        bannerText={bannerText}
        packagesSum={pkgsSum}
@@ -115,7 +117,7 @@ function InnerCode({
    return (
      <PublicCode
        codeProduct={codeProduct}
-        roomIndex={roomIndex}
+        roomNr={roomNr}
        roomTypeCode={roomTypeCode}
        bannerText={bannerText}
        packagesSum={pkgsSum}
@@ -154,16 +156,17 @@ function useBannerText({

 function CorporateChequeCode({
  codeProduct,
-  roomIndex,
+  roomNr,
  bannerText,
  packagesSum,
+  roomTypeCode,
  requestedPackagesSum,
  handleSelectRate,
  isSelected,
 }: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  codeProduct: Extract<CodeProduct, { corporateCheque: any }>
-  roomIndex: number
+  roomNr: number
  roomTypeCode: string
  bannerText: string
  packagesSum: ReturnType<typeof sumPackages>
@@ -171,7 +174,6 @@ function CorporateChequeCode({
  handleSelectRate: (rateCode: string) => void
  isSelected: boolean
 }) {
-  const roomNr = roomIndex + 1
  const intl = useIntl()
  const rateTitles = useRateTitles()
  const { localPrice, rateCode, requestedPrice } = codeProduct.corporateCheque
@@ -220,7 +222,7 @@ function CorporateChequeCode({
        handleSelectRate(codeProduct.corporateCheque.rateCode)
      }
      isSelected={isSelected}
-      name={`rateCode-${roomNr}-${rateCode}`}
+      id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
      paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
      rate={{
        label: codeProduct.rateDefinition?.title,
@@ -229,23 +231,23 @@ function CorporateChequeCode({
      }}
      rateTitle={rateTitles[codeProduct.rate].title}
      rateTermDetails={rateTermDetails}
-      value={rateCode}
    />
  )
 }

 function PublicCode({
  codeProduct,
-  roomIndex,
+  roomNr,
  bannerText,
  packagesSum,
+  roomTypeCode,
  packagesSumRequested,
  nights,
  handleSelectRate,
  isSelected,
 }: {
  codeProduct: Extract<CodeProduct, { public: unknown }>
-  roomIndex: number
+  roomNr: number
  roomTypeCode: string
  bannerText: string
  packagesSum: ReturnType<typeof sumPackages>
@@ -254,7 +256,6 @@ function PublicCode({
  handleSelectRate: (rateCode: string) => void
  isSelected: boolean
 }) {
-  const roomNr = roomIndex + 1
  const intl = useIntl()
  const rateTitles = useRateTitles()
  if (!codeProduct.public) {
@@ -315,7 +316,7 @@ function PublicCode({
      comparisonRate={comparisonRate}
      handleChange={() => handleSelectRate(codeProduct.public!.rateCode)}
      isSelected={isSelected}
-      name={`rateCode-${roomNr}-${rateCode}`}
+      id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
      paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
      rate={{
        label: codeProduct.rateDefinition?.title,
@@ -324,7 +325,6 @@ function PublicCode({
      }}
      rateTitle={rateTitles[codeProduct.rate].title}
      rateTermDetails={rateTermDetails}
-      value={rateCode}
    />
  )
 }
@@ -333,20 +333,20 @@ function VoucherCode({
  codeProduct,
  bannerText,
  packagesSum,
-  roomIndex,
+  roomNr,
+  roomTypeCode,
  handleSelectRate,
  isSelected,
 }: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  codeProduct: Extract<CodeProduct, { voucher: any }>
-  roomIndex: number
+  roomNr: number
  roomTypeCode: string
  bannerText: string
  packagesSum: ReturnType<typeof sumPackages>
  handleSelectRate: (rateCode: string) => void
  isSelected: boolean
 }) {
-  const roomNr = roomIndex + 1
  const intl = useIntl()
  const rateTitles = useRateTitles()
  const { numberOfVouchers, rateCode } = codeProduct.voucher
@@ -379,7 +379,7 @@ function VoucherCode({
      bannerText={bannerText}
      handleChange={() => handleSelectRate(codeProduct.voucher.rateCode)}
      isSelected={isSelected}
-      name={`rateCode-${roomNr}-${rateCode}`}
+      id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
      paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
      rate={{
        label: codeProduct.rateDefinition?.title,
@@ -388,7 +388,6 @@ function VoucherCode({
      }}
      rateTitle={rateTitles[codeProduct.rate].title}
      rateTermDetails={rateTermDetails}
-      value={rateCode}
    />
  )
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx
@@ -84,6 +84,7 @@ function Inner({
    actions: { selectRate },
  } = useSelectRateContext()
  const config = useBookingFlowConfig()
+  const roomNr = roomIndex + 1

  const isMainRoom = roomIndex === 0

@@ -249,10 +250,9 @@ function Inner({
      }}
      isMemberRateActive={isMemberRateActive}
      isSelected={isSelected}
-      name={`rateCode-${roomIndex + 1}-${rateCode}`}
+      id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
      paymentTerm={rateTitles[product.rate].paymentTerm}
      rateTitle={rateTitles[product.rate].title}
-      value={rateCode}
      rateTermDetails={rateTermDetails}
    />
  )
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
@@ -8,10 +8,11 @@ import { MaterialIcon } from '../../Icons/MaterialIcon'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'

 interface CampaignRateCardProps {
-  name: string
-  value: string
+  id: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
@@ -29,8 +30,7 @@ interface CampaignRateCardProps {
 }

 export default function CampaignRateCard({
-  name,
-  value,
+  id,
  isSelected,
  rateTitle,
  paymentTerm,
@@ -49,155 +49,167 @@ export default function CampaignRateCard({
    variant: 'Campaign',
  })

+  const intl = useIntl()
  return (
-    <label>
-      <input
-        className={styles.radio}
-        type="radio"
-        name={name}
-        value={value}
-        checked={isSelected}
-        onChange={handleChange}
+    <div
+      className={cx(classNames, {
+        [styles.selected]: isSelected,
+      })}
+    >
+      <ButtonRAC
+        onPress={handleChange}
+        className={styles.buttonOverlay}
+        aria-pressed={isSelected}
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-details`}
      />
-      <div className={classNames}>
-        <div className={styles.banner}>
-          <MaterialIcon size={16} icon="sell" color="CurrentColor" />
-          <Typography variant="Label/xsBold">
-            <p>{bannerText}</p>
-          </Typography>
-        </div>
-        <div className={styles.container}>
-          <header>
-            <Typography variant="Tag/sm">
-              <h3 className={styles.title}>
-                <Modal
-                  title={rateTitle}
-                  subtitle={paymentTerm}
-                  trigger={
-                    <IconButton theme="Black" style="Muted" wrapping>
-                      <MaterialIcon
-                        icon="info"
-                        size={20}
-                        color="Icon/Default"
-                      />
-                    </IconButton>
-                  }
-                >
-                  {rateTermDetails.map((termGroup) => (
-                    <div key={termGroup.title} className={styles.terms}>
-                      <Typography variant={'Body/Paragraph/mdBold'}>
-                        <p>{termGroup.title}</p>
-                      </Typography>
-                      {termGroup.terms.map((term) => (
-                        <Typography key={term}>
-                          <p className={styles.term}>
-                            <MaterialIcon
-                              icon="check"
-                              color="Icon/Feedback/Success"
-                              size={20}
-                              className={styles.termsIcon}
-                            />
-                            {term}
-                          </p>
-                        </Typography>
-                      ))}
-                    </div>
-                  ))}
-                </Modal>
-                {rateTitle}
-                <span className={styles.textSecondary}>
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {` / ${paymentTerm}`}
-                </span>
-              </h3>
-            </Typography>
-            <div className={styles.checkIcon}>
-              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
-            </div>
-          </header>
-          <div className={styles.content}>
-            <div
-              className={cx(styles.rateRow, {
-                [styles.highlightedRate]: isHighlightedRateLabel,
-              })}
-            >
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <p>{rate.label}</p>
-              </Typography>
-              <Typography variant="Title/Subtitle/md">
-                <p
-                  className={cx({
-                    [styles.highlightedRate]: isHighlightedRate,
+      <div className={styles.banner}>
+        <MaterialIcon size={16} icon="sell" color="CurrentColor" />
+        <Typography variant="Label/xsBold">
+          <p>{bannerText}</p>
+        </Typography>
+      </div>
+      <div className={styles.container}>
+        <Typography variant="Tag/sm">
+          <h3 className={styles.title}>
+            <Modal
+              title={rateTitle}
+              subtitle={paymentTerm}
+              trigger={
+                <IconButton
+                  theme="Black"
+                  style="Muted"
+                  wrapping
+                  className={styles.triggerButton}
+                  aria-label={intl.formatMessage({
+                    id: 'selectRate.rateCard.openReservationPolicy',
+                    defaultMessage: 'Open reservation policy',
                  })}
                >
+                  <MaterialIcon icon="info" size={20} color="Icon/Default" />
+                </IconButton>
+              }
+            >
+              {rateTermDetails.map((termGroup) => (
+                <div key={termGroup.title} className={styles.terms}>
+                  <Typography variant={'Body/Paragraph/mdBold'}>
+                    <p>{termGroup.title}</p>
+                  </Typography>
+                  {termGroup.terms.map((term) => (
+                    <Typography key={term}>
+                      <p className={styles.term}>
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
+                          className={styles.termsIcon}
+                        />
+                        {term}
+                      </p>
+                    </Typography>
+                  ))}
+                </div>
+              ))}
+            </Modal>
+            <span id={`${id}-title`}>
+              {rateTitle}
+              <span className={styles.textSecondary}>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {` / ${paymentTerm}`}
+              </span>
+            </span>
+          </h3>
+        </Typography>
+        <div className={styles.content} id={`${id}-details`}>
+          <div
+            className={cx(styles.rateRow, {
+              [styles.highlightedRate]: isHighlightedRateLabel,
+            })}
+          >
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p>{rate.label}</p>
+            </Typography>
+            <Typography variant="Title/Subtitle/md">
+              <p
+                className={cx({
+                  [styles.highlightedRate]: isHighlightedRate,
+                })}
+              >
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {`${rate.price} `}
+                <Typography variant="Body/Supporting text (caption)/smBold">
+                  <span>{rate.unit}</span>
+                </Typography>
+              </p>
+            </Typography>
+          </div>
+          {memberRate ? (
+            <div className={`${styles.rateRow} ${styles.highlightedRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{memberRate.label}</p>
+              </Typography>
+              <Typography variant="Title/Subtitle/md">
+                <p>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {`${rate.price} `}
+                  {`${memberRate.price} `}
                  <Typography variant="Body/Supporting text (caption)/smBold">
-                    <span>{rate.unit}</span>
+                    <span>{memberRate.unit}</span>
                  </Typography>
                </p>
              </Typography>
            </div>
-            {memberRate ? (
-              <div className={`${styles.rateRow} ${styles.highlightedRate}`}>
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <p>{memberRate.label}</p>
-                </Typography>
-                <Typography variant="Title/Subtitle/md">
-                  <p>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {`${memberRate.price} `}
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <span>{memberRate.unit}</span>
-                    </Typography>
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-            {comparisonRate ? (
-              <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
-                <Typography variant="Title/Subtitle/md">
-                  <p>
-                    <span className={styles.strikethrough}>
-                      {comparisonRate.price}
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    </span>{' '}
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <span className={styles.strikethrough}>
-                        {comparisonRate.unit}
-                      </span>
-                    </Typography>
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-            {approximateRate ? (
-              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <p>{approximateRate.label}</p>
-                </Typography>
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <p>
-                    {approximateRate.price} {approximateRate.unit}
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-          </div>
-          {omnibusRate ? (
-            <footer className={styles.footer}>
-              <Typography variant="Tag/sm">
-                <p>{omnibusRate.label}</p>
-              </Typography>
-              <Typography variant="Tag/sm">
+          ) : null}
+          {comparisonRate ? (
+            <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
+              <Typography variant="Title/Subtitle/md">
                <p>
-                  {omnibusRate.price} {omnibusRate.unit}
+                  <span className={styles.strikethrough}>
+                    {comparisonRate.price}
+                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  </span>{' '}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span className={styles.strikethrough}>
+                      {comparisonRate.unit}
+                    </span>
+                  </Typography>
                </p>
              </Typography>
-            </footer>
+            </div>
+          ) : null}
+          {approximateRate ? (
+            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{approximateRate.label}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>
+                  {approximateRate.price} {approximateRate.unit}
+                </p>
+              </Typography>
+            </div>
          ) : null}
        </div>
+        {omnibusRate ? (
+          <footer className={styles.footer}>
+            <Typography variant="Tag/sm">
+              <p>{omnibusRate.label}</p>
+            </Typography>
+            <Typography variant="Tag/sm">
+              <p>
+                {omnibusRate.price} {omnibusRate.unit}
+              </p>
+            </Typography>
+          </footer>
+        ) : null}
      </div>
-    </label>
+      {isSelected && (
+        <MaterialIcon
+          icon="check"
+          size={22}
+          color="Icon/Inverted"
+          className={styles.checkIcon}
+        />
+      )}
+    </div>
  )
 }
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/index.tsx
@@ -6,10 +6,12 @@ import { Typography } from '../../Typography'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { cx } from 'class-variance-authority'
+import { useIntl } from 'react-intl'

 interface CodeRateCardProps {
-  name: string
-  value: string
+  id: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
@@ -24,8 +26,7 @@ interface CodeRateCardProps {
 }

 export default function CodeRateCard({
-  name,
-  value,
+  id,
  isSelected,
  rateTitle,
  paymentTerm,
@@ -40,119 +41,131 @@ export default function CodeRateCard({
  const classNames = variants({
    variant: 'Code',
  })
+  const intl = useIntl()

  return (
-    <label>
-      <input
-        className={styles.radio}
-        type="radio"
-        name={name}
-        value={value}
-        checked={isSelected}
-        onChange={handleChange}
+    <div
+      className={cx(classNames, {
+        [styles.selected]: isSelected,
+      })}
+    >
+      <ButtonRAC
+        onPress={handleChange}
+        className={styles.buttonOverlay}
+        aria-pressed={isSelected}
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-details`}
      />
-      <div className={classNames}>
-        <Typography variant="Label/xsBold">
-          <p className={styles.banner}>{bannerText}</p>
-        </Typography>
-        <div className={styles.container}>
-          <header>
-            <Typography variant="Tag/sm">
-              <h3 className={styles.title}>
-                <Modal
-                  title={rateTitle}
-                  subtitle={paymentTerm}
-                  trigger={
-                    <IconButton theme="Black" style="Muted" wrapping>
-                      <MaterialIcon
-                        icon="info"
-                        size={20}
-                        color="Icon/Default"
-                      />
-                    </IconButton>
-                  }
+      <Typography variant="Label/xsBold">
+        <p className={styles.banner}>{bannerText}</p>
+      </Typography>
+      <div className={styles.container}>
+        <Typography variant="Tag/sm">
+          <h3 className={styles.title}>
+            <Modal
+              title={rateTitle}
+              subtitle={paymentTerm}
+              trigger={
+                <IconButton
+                  theme="Black"
+                  style="Muted"
+                  wrapping
+                  className={styles.triggerButton}
+                  aria-label={intl.formatMessage({
+                    id: 'selectRate.rateCard.openReservationPolicy',
+                    defaultMessage: 'Open reservation policy',
+                  })}
                >
-                  {rateTermDetails.map((termGroup) => (
-                    <div key={termGroup.title} className={styles.terms}>
-                      <Typography variant={'Body/Paragraph/mdBold'}>
-                        <p>{termGroup.title}</p>
-                      </Typography>
-                      {termGroup.terms.map((term) => (
-                        <Typography key={term}>
-                          <p className={styles.term}>
-                            <MaterialIcon
-                              icon="check"
-                              color="Icon/Feedback/Success"
-                              size={20}
-                              className={styles.termsIcon}
-                            />
-                            {term}
-                          </p>
-                        </Typography>
-                      ))}
-                    </div>
-                  ))}
-                </Modal>
-                {rateTitle}
-                <span className={styles.textSecondary}>
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {` / ${paymentTerm}`}
-                </span>
-              </h3>
-            </Typography>
-            <div className={styles.checkIcon}>
-              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
-            </div>
-          </header>
-          <div className={styles.content}>
-            <div
-              className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
+                  <MaterialIcon icon="info" size={20} color="Icon/Default" />
+                </IconButton>
+              }
            >
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <p>{rate.label}</p>
-              </Typography>
+              {rateTermDetails.map((termGroup) => (
+                <div key={termGroup.title} className={styles.terms}>
+                  <Typography variant={'Body/Paragraph/mdBold'}>
+                    <p>{termGroup.title}</p>
+                  </Typography>
+                  {termGroup.terms.map((term) => (
+                    <Typography key={term}>
+                      <p className={styles.term}>
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
+                          className={styles.termsIcon}
+                        />
+                        {term}
+                      </p>
+                    </Typography>
+                  ))}
+                </div>
+              ))}
+            </Modal>
+            <span id={`${id}-title`}>
+              {rateTitle}
+              <span className={styles.textSecondary}>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {` / ${paymentTerm}`}
+              </span>
+            </span>
+          </h3>
+        </Typography>
+        <div className={styles.content} id={`${id}-details`}>
+          <div
+            className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
+          >
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p>{rate.label}</p>
+            </Typography>
+            <Typography variant="Title/Subtitle/md">
+              <p>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {`${rate.price} `}
+                <Typography variant="Body/Supporting text (caption)/smBold">
+                  <span>{rate.unit}</span>
+                </Typography>
+              </p>
+            </Typography>
+          </div>
+          {comparisonRate ? (
+            <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
              <Typography variant="Title/Subtitle/md">
                <p>
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {`${rate.price} `}
+                  <span className={styles.strikethrough}>
+                    {comparisonRate.price}
+                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  </span>{' '}
                  <Typography variant="Body/Supporting text (caption)/smBold">
-                    <span>{rate.unit}</span>
+                    <span className={styles.strikethrough}>
+                      {comparisonRate.unit}
+                    </span>
                  </Typography>
                </p>
              </Typography>
            </div>
-            {comparisonRate ? (
-              <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
-                <Typography variant="Title/Subtitle/md">
-                  <p>
-                    <span className={styles.strikethrough}>
-                      {comparisonRate.price}
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    </span>{' '}
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <span className={styles.strikethrough}>
-                        {comparisonRate.unit}
-                      </span>
-                    </Typography>
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-            {approximateRate ? (
-              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <p>{approximateRate.label}</p>
-                </Typography>
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <p>
-                    {approximateRate.price} {approximateRate.unit}
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-          </div>
+          ) : null}
+          {approximateRate ? (
+            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{approximateRate.label}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>
+                  {approximateRate.price} {approximateRate.unit}
+                </p>
+              </Typography>
+            </div>
+          ) : null}
        </div>
      </div>
-    </label>
+      {isSelected && (
+        <MaterialIcon
+          icon="check"
+          size={22}
+          color="Icon/Inverted"
+          className={styles.checkIcon}
+        />
+      )}
+    </div>
  )
 }
--- a/packages/design-system/lib/components/RateCard/Modal/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Modal/index.tsx
@@ -20,6 +20,8 @@ import { fade, slideInOut } from './motionVariants'
 import styles from './modal.module.css'
 import { Typography } from '../../Typography'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { IconButton } from '../../IconButton'
+import { useIntl } from 'react-intl'

 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -35,6 +37,8 @@ function InnerModal({
  subtitle,
  hideHeader,
 }: PropsWithChildren<InnerModalProps>) {
+  const intl = useIntl()
+
  function modalStateHandler(newAnimationState: AnimationState) {
    setAnimation((currentAnimationState) =>
      newAnimationState === AnimationStateEnum.hidden &&
@@ -86,14 +90,17 @@ function InnerModal({
                      </Typography>
                    )}
                  </div>
-
-                  <button
-                    onClick={close}
-                    type="button"
-                    className={styles.close}
+                  <IconButton
+                    theme="Black"
+                    style="Muted"
+                    onPress={close}
+                    aria-label={intl.formatMessage({
+                      id: 'common.close',
+                      defaultMessage: 'Close',
+                    })}
                  >
-                    <MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
-                  </button>
+                    <MaterialIcon icon="close" size={24} color="CurrentColor" />
+                  </IconButton>
                </header>
              )}

--- a/packages/design-system/lib/components/RateCard/Modal/modal.module.css
+++ b/packages/design-system/lib/components/RateCard/Modal/modal.module.css
@@ -53,13 +53,6 @@
  padding: var(--Space-x3);
 }

-.close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
@media screen and (min-width: 768px) {
  .overlay {
    display: flex;
--- a/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
@@ -28,8 +28,6 @@ type Story = StoryObj<typeof RegularRateCard>

 export const Default: Story = {
  args: {
-    name: 'regular',
-    value: 'regular',
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY NOW',
    rate: {
@@ -63,8 +61,6 @@ export const Default: Story = {

 export const Selected: Story = {
  args: {
-    name: 'regular',
-    value: 'regular',
    isSelected: true,
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY NOW',
@@ -94,8 +90,6 @@ export const Selected: Story = {

 export const MemberRateActive: Story = {
  args: {
-    name: 'regular',
-    value: 'regular',
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY NOW',
    rate: {
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/index.tsx
@@ -6,10 +6,12 @@ import { Typography } from '../../Typography'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { cx } from 'class-variance-authority'
+import { useIntl } from 'react-intl'

 interface RegularRateCardProps {
-  name: string
-  value: string
+  id: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
@@ -23,8 +25,7 @@ interface RegularRateCardProps {
 }

 export default function RegularRateCard({
-  name,
-  value,
+  id,
  isSelected,
  rateTitle,
  paymentTerm,
@@ -37,141 +38,153 @@ export default function RegularRateCard({
  rateTermDetails,
 }: RegularRateCardProps) {
  const classNames = variants({ variant: 'Regular' })
+
+  const intl = useIntl()
+
  return (
-    <label>
-      <input
-        className={styles.radio}
-        type="radio"
-        name={name}
-        value={value}
-        checked={isSelected}
-        onChange={handleChange}
+    <div
+      className={cx(classNames, {
+        [styles.selected]: isSelected,
+      })}
+    >
+      <ButtonRAC
+        onPress={handleChange}
+        className={styles.buttonOverlay}
+        aria-pressed={isSelected}
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-details`}
      />
-      <div className={classNames}>
-        <div className={styles.container}>
-          <header>
-            <Typography variant="Tag/sm">
-              <h3 className={styles.title}>
-                <Modal
-                  title={rateTitle}
-                  subtitle={paymentTerm}
-                  trigger={
-                    <IconButton theme="Black" style="Muted" wrapping>
-                      <MaterialIcon
-                        icon="info"
-                        size={20}
-                        color="Icon/Default"
-                      />
-                    </IconButton>
-                  }
+      <div className={styles.container}>
+        <Typography variant="Tag/sm">
+          <h3 className={styles.title}>
+            <Modal
+              title={rateTitle}
+              subtitle={paymentTerm}
+              trigger={
+                <IconButton
+                  theme="Black"
+                  style="Muted"
+                  wrapping
+                  className={styles.triggerButton}
+                  aria-label={intl.formatMessage({
+                    id: 'selectRate.rateCard.openReservationPolicy',
+                    defaultMessage: 'Open reservation policy',
+                  })}
                >
-                  {rateTermDetails.map((termGroup) => (
-                    <div key={termGroup.title} className={styles.terms}>
-                      <Typography variant={'Body/Paragraph/mdBold'}>
-                        <p>{termGroup.title}</p>
-                      </Typography>
-                      {termGroup.terms.map((term) => (
-                        <Typography key={term}>
-                          <p className={styles.term}>
-                            <MaterialIcon
-                              icon="check"
-                              color="Icon/Feedback/Success"
-                              size={20}
-                              className={styles.termsIcon}
-                            />
-                            {term}
-                          </p>
-                        </Typography>
-                      ))}
-                    </div>
+                  <MaterialIcon icon="info" size={20} color="Icon/Default" />
+                </IconButton>
+              }
+            >
+              {rateTermDetails.map((termGroup) => (
+                <div key={termGroup.title} className={styles.terms}>
+                  <Typography variant={'Body/Paragraph/mdBold'}>
+                    <p>{termGroup.title}</p>
+                  </Typography>
+                  {termGroup.terms.map((term) => (
+                    <Typography key={term}>
+                      <p className={styles.term}>
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
+                          className={styles.termsIcon}
+                        />
+                        {term}
+                      </p>
+                    </Typography>
                  ))}
-                </Modal>
-                {rateTitle}
-                <span className={styles.textSecondary}>
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {` / ${paymentTerm}`}
-                </span>
-              </h3>
-            </Typography>
-            <div className={styles.checkIcon}>
-              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
-            </div>
-          </header>
-          <div>
-            {!isMemberRateActive && rate ? (
-              <div className={styles.rateRow}>
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <p>{rate.label}</p>
-                </Typography>
-                <Typography variant="Title/Subtitle/md">
-                  <p>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {`${rate.price} `}
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <span>{rate.unit}</span>
-                    </Typography>
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-            {memberRate ? (
-              <div className={`${styles.rateRow} ${styles.highlightedRate}`}>
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <p>{memberRate.label}</p>
-                </Typography>
-                <Typography variant="Title/Subtitle/md">
-                  <span>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {`${memberRate.price} `}
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <span>{memberRate.unit}</span>
-                    </Typography>
-                  </span>
-                </Typography>
-              </div>
-            ) : null}
-            {isMemberRateActive && rate ? (
-              <Typography variant="Body/Paragraph/mdRegular">
-                <div
-                  className={`${styles.rateRow} ${styles.strikeThroughRate}`}
-                >
-                  <s>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {`${rate.price} `}
-                    <Typography variant="Tag/sm">
-                      <span>{rate.unit}</span>
-                    </Typography>
-                  </s>
                </div>
+              ))}
+            </Modal>
+            <span id={`${id}-title`}>
+              {rateTitle}
+              <span className={styles.textSecondary}>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {` / ${paymentTerm}`}
+              </span>
+            </span>
+          </h3>
+        </Typography>
+        <div id={`${id}-details`}>
+          {!isMemberRateActive && rate ? (
+            <div className={styles.rateRow}>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{rate.label}</p>
              </Typography>
-            ) : null}
-            {approximateRate ? (
-              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <p>{approximateRate.label}</p>
-                </Typography>
-                <Typography variant="Body/Supporting text (caption)/smRegular">
-                  <p>
-                    {approximateRate.price} {approximateRate.unit}
-                  </p>
-                </Typography>
-              </div>
-            ) : null}
-          </div>
-          {omnibusRate ? (
-            <footer className={styles.footer}>
-              <Typography variant="Tag/sm">
-                <p>{omnibusRate.label}</p>
-              </Typography>
-              <Typography variant="Tag/sm">
+              <Typography variant="Title/Subtitle/md">
                <p>
-                  {omnibusRate.price} {omnibusRate.unit}
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${rate.price} `}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span>{rate.unit}</span>
+                  </Typography>
                </p>
              </Typography>
-            </footer>
+            </div>
+          ) : null}
+          {memberRate ? (
+            <div className={`${styles.rateRow} ${styles.highlightedRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{memberRate.label}</p>
+              </Typography>
+              <Typography variant="Title/Subtitle/md">
+                <span>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${memberRate.price} `}
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <span>{memberRate.unit}</span>
+                  </Typography>
+                </span>
+              </Typography>
+            </div>
+          ) : null}
+          {isMemberRateActive && rate ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div className={`${styles.rateRow} ${styles.strikeThroughRate}`}>
+                <s>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${rate.price} `}
+                  <Typography variant="Tag/sm">
+                    <span>{rate.unit}</span>
+                  </Typography>
+                </s>
+              </div>
+            </Typography>
+          ) : null}
+          {approximateRate ? (
+            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{approximateRate.label}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>
+                  {approximateRate.price} {approximateRate.unit}
+                </p>
+              </Typography>
+            </div>
          ) : null}
        </div>
+        {omnibusRate ? (
+          <footer className={styles.footer}>
+            <Typography variant="Tag/sm">
+              <p>{omnibusRate.label}</p>
+            </Typography>
+            <Typography variant="Tag/sm">
+              <p>
+                {omnibusRate.price} {omnibusRate.unit}
+              </p>
+            </Typography>
+          </footer>
+        ) : null}
      </div>
-    </label>
+      {isSelected && (
+        <MaterialIcon
+          icon="check"
+          size={22}
+          color="Icon/Inverted"
+          className={styles.checkIcon}
+        />
+      )}
+    </div>
  )
 }
--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -1,15 +1,3 @@
-.radio {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .checkIcon {
  --size: 32px;
  width: var(--size);
@@ -33,23 +21,30 @@
  background-color: var(--Scandic-Grey-00);
  border: 1px solid transparent;
  border-radius: var(--Corner-radius-md);
+  padding: 0;
 }

-.rateCard:hover {
+.buttonOverlay {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  border-radius: var(--Corner-radius-md);
+  z-index: 1;
  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+}
+.rateCard:hover {
  background-color: var(--Scandic-Grey-10);
 }

-.radio:checked ~ .rateCard {
-  border: 1px solid var(--Scandic-Peach-80, 'black');
-}
-
-.radio:focus-visible ~ .rateCard {
-  outline: 2px solid var(--Border-Interactive-Focus);
-}
-
-label:not(:has(.radio:checked)) .checkIcon {
-  display: none;
+.rateCard.selected {
+  border-color: var(--Border-Interactive-Active);
 }

 .banner {
@@ -67,8 +62,13 @@ label:not(:has(.radio:checked)) .checkIcon {
  flex-direction: column;
  gap: var(--Space-x1);
  padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
+  position: relative;
 }

+.triggerButton {
+  cursor: pointer;
+  z-index: 2;
+}
 .container > * {
  padding-bottom: var(--Space-x1);
  border-bottom: 2px solid var(--Neutral-Opacity-Black-5);