From 873174dcc3e1fddf055bc10e840296588bcbf0ad Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 6 Nov 2025 11:46:59 +0000 Subject: [PATCH] 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 --- .../Rooms/MultiRoomWrapper/index.tsx | 19 +- .../RoomsList/RoomListItem/Rates/Campaign.tsx | 3 +- .../RoomsList/RoomListItem/Rates/Code.tsx | 35 ++- .../RoomsList/RoomListItem/Rates/Regular.tsx | 4 +- .../components/RateCard/Campaign/index.tsx | 288 +++++++++--------- .../lib/components/RateCard/Code/index.tsx | 221 +++++++------- .../lib/components/RateCard/Modal/index.tsx | 21 +- .../RateCard/Modal/modal.module.css | 7 - .../RateCard/Regular/Regular.stories.tsx | 6 - .../lib/components/RateCard/Regular/index.tsx | 269 ++++++++-------- .../components/RateCard/rate-card.module.css | 46 +-- 11 files changed, 483 insertions(+), 436 deletions(-) diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx index 5c5e35e60..b1c527a0a 100644 --- 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 ( -
+
+

+ {intl.formatMessage( + { + id: "booking.roomIndex", + defaultMessage: "Room {roomIndex}", + }, + { + roomIndex: roomNr, + } + )} +

+
{selectedRate && !isActiveRoom ? null : ( {title} diff --git 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 index c13193308..a8390ea69 100644 --- 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} /> ) } diff --git 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 index e8467d442..14fc85bb3 100644 --- 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 ( - roomIndex: number + roomNr: number roomTypeCode: string bannerText: string packagesSum: ReturnType @@ -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 - roomIndex: number + roomNr: number roomTypeCode: string bannerText: string packagesSum: ReturnType @@ -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 - roomIndex: number + roomNr: number roomTypeCode: string bannerText: string packagesSum: ReturnType 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} /> ) } diff --git 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 index 9d223cdbd..18fd169fd 100644 --- 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} /> ) diff --git a/packages/design-system/lib/components/RateCard/Campaign/index.tsx b/packages/design-system/lib/components/RateCard/Campaign/index.tsx index 97fbb0ad3..bf4d3d5a1 100644 --- 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 ( -