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/design-system/lib/components/RateCard/Points/index.tsx

@@ -8,6 +8,7 @@ import { Radio } from '../../Radio'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
+import { useIntl } from 'react-intl'
 
 interface PointsRateCardProps {
   rateTitle: string
@@ -19,22 +20,27 @@ interface PointsRateCardProps {
   isNotEnoughPoints?: boolean
   notEnoughPointsText?: string
   rateTermDetails: RateTermDetails[]
+  id: string
+  roomTypeCode: string
 }
 
 export default function PointsRateCard({
   rateTitle,
   paymentTerm,
   bannerText,
+  id,
   rates,
   selectedRate,
   isNotEnoughPoints,
   notEnoughPointsText,
   onRateSelect,
+  roomTypeCode,
   rateTermDetails,
 }: PointsRateCardProps) {
   const classNames = variants({
     variant: 'Points',
   })
+  const intl = useIntl()
 
   return (
     <div className={classNames}>
@@ -49,7 +55,15 @@ export default function PointsRateCard({
                 title={rateTitle}
                 subtitle={paymentTerm}
                 trigger={
-                  <IconButton theme="Black" style="Muted" wrapping>
+                  <IconButton
+                    theme="Black"
+                    style="Muted"
+                    wrapping
+                    aria-label={intl.formatMessage({
+                      id: 'selectRate.rateCard.openReservationPolicy',
+                      defaultMessage: 'Open reservation policy',
+                    })}
+                  >
                     <MaterialIcon icon="info" size={20} color="Icon/Default" />
                   </IconButton>
                 }
@@ -85,8 +99,10 @@ export default function PointsRateCard({
         </header>
         <div className={styles.content}>
           <RadioGroup
-            aria-label={rateTitle}
-            value={selectedRate}
+            /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
+            aria-label={`${rateTitle} / ${paymentTerm}`}
+            aria-describedby={roomTypeCode}
+            value={selectedRate ? selectedRate : null} // default to null for focus to land on the first radio on tab, undefined set tabIndex to -1
             onChange={onRateSelect}
           >
             {rates.map((rate, index) => (
@@ -94,6 +110,7 @@ export default function PointsRateCard({
                 <Radio
                   value={rate.rateCode}
                   isDisabled={rate.isDisabled || isNotEnoughPoints}
+                  id={`${id}-${rate.rateCode}`}
                 >
                   <div className={styles.pointsRow}>
                     <Typography variant="Title/Subtitle/md">