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

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>

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}
     />
   )
 }

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}
     />
   )
 }

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}
     />
   )