Merged in fix/BOOK-119-accessibility-redemption-radiogroup (pull request #3172)

fix(BOOK-119): reward nights accessible radiogroup

* fix(BOOK-119): reward nights accessible radiogroup

* fix(BOOK-119): pr comment focus

* fix(BOOK-119): added roomtype name to the radiogroup for accessibility improvment


Approved-by: Matilda Haneling
Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/index.tsx

@@ -11,9 +11,10 @@ import type { RoomInfo } from "../../../../../../../contexts/SelectRate/types"
 
 type Props = {
   roomInfo: RoomInfo
+  roomTypeCode: string
 }
 
-export default function Details({ roomInfo }: Props) {
+export default function Details({ roomInfo, roomTypeCode }: Props) {
   const intl = useIntl()
 
   const { name, occupancy, roomSize } = roomInfo || {}
@@ -50,7 +51,7 @@ export default function Details({ roomInfo }: Props) {
       </div>
       <div className={styles.roomDetails}>
         <Typography variant="Title/Subtitle/lg">
-          <h2>{name}</h2>
+          <h2 id={roomTypeCode}>{name}</h2>
         </Typography>
       </div>
     </>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx

@@ -227,6 +227,7 @@ function Inner({
       key={product.rate}
       approximateRate={approximateRate}
       bannerText={bannerText}
+      roomTypeCode={roomTypeCode}
       handleChange={() =>
         selectRate({
           roomIndex,

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx

@@ -221,6 +221,7 @@ function CorporateChequeCode({
       handleChange={() =>
         handleSelectRate(codeProduct.corporateCheque.rateCode)
       }
+      roomTypeCode={roomTypeCode}
       isSelected={isSelected}
       id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
       paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
@@ -314,6 +315,7 @@ function PublicCode({
       approximateRate={approximateRate}
       bannerText={bannerText}
       comparisonRate={comparisonRate}
+      roomTypeCode={roomTypeCode}
       handleChange={() => handleSelectRate(codeProduct.public!.rateCode)}
       isSelected={isSelected}
       id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
@@ -379,6 +381,7 @@ function VoucherCode({
       bannerText={bannerText}
       handleChange={() => handleSelectRate(codeProduct.voucher.rateCode)}
       isSelected={isSelected}
+      roomTypeCode={roomTypeCode}
       id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
       paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
       rate={{

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Redemptions.tsx

@@ -34,6 +34,7 @@ export default function Redemptions({
     actions: { selectRate },
     selectedRates,
   } = useSelectRateContext()
+  const roomNr = roomIndex + 1
   const pointsCurrency = useGetPointsCurrency()
 
   // TODO: Replace with context value when we have support for dropdown "Show all rates"
@@ -125,10 +126,12 @@ export default function Redemptions({
       }}
       paymentTerm={rateTitles[firstRedemption.rate].paymentTerm}
       rates={rates}
+      id={`${roomNr}-${roomTypeCode}`.replace(/\s+/g, "-")}
       rateTitle={rateTitles[firstRedemption.rate].title}
       rateTermDetails={rateTermDetails}
       selectedRate={selectedRateCode}
       isNotEnoughPoints={notEnoughPoints}
+      roomTypeCode={roomTypeCode}
       notEnoughPointsText={intl.formatMessage({
         id: "booking.notEnoughPoints",
         defaultMessage: "Not enough points",

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx

@@ -250,6 +250,7 @@ function Inner({
       }}
       isMemberRateActive={isMemberRateActive}
       isSelected={isSelected}
+      roomTypeCode={roomTypeCode}
       id={`${roomNr}-${roomTypeCode}-${rateCode}`.replace(/\s+/g, "-")}
       paymentTerm={rateTitles[product.rate].paymentTerm}
       rateTitle={rateTitles[product.rate].title}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx

@@ -47,7 +47,7 @@ export function RoomListItem({
           images={room.roomInfo.images ?? []}
           hotelId={hotelId}
         />
-        <Details roomInfo={room.roomInfo} />
+        <Details roomInfo={room.roomInfo} roomTypeCode={room.roomTypeCode} />
       </div>
       <div className={styles.container}>
         {room.status === AvailabilityEnum.NotAvailable ? (