diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/index.tsx
index 4909236f2..fb0c1a186 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/index.tsx
+++ b/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) {
{room.status === AvailabilityEnum.NotAvailable ? (
diff --git a/packages/design-system/lib/components/Radio/Radio.tsx b/packages/design-system/lib/components/Radio/Radio.tsx
index b22e481b9..f3907f581 100644
--- a/packages/design-system/lib/components/Radio/Radio.tsx
+++ b/packages/design-system/lib/components/Radio/Radio.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'
import { Radio as AriaRadio } from 'react-aria-components'
import styles from './radio.module.css'
import { variants } from './variants'
+import { cx } from 'class-variance-authority'
interface RadioProps extends PropsWithChildren {
value: string
@@ -22,7 +23,7 @@ export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
id={inputId}
value={value}
isDisabled={isDisabled}
- className={`${styles.container} ${isDisabled ? styles.disabled : ''}`}
+ className={cx(styles.container, { [styles.disabled]: isDisabled })}
>
{children}
diff --git a/packages/design-system/lib/components/Radio/radio.module.css b/packages/design-system/lib/components/Radio/radio.module.css
index 310a5c68e..dcf5e4627 100644
--- a/packages/design-system/lib/components/Radio/radio.module.css
+++ b/packages/design-system/lib/components/Radio/radio.module.css
@@ -22,6 +22,11 @@
border-width: 8px;
}
+.container[data-focus-visible] .radio {
+ outline: 2px solid var(--UI-Input-Controls-Border-Focus);
+ outline-offset: 2px;
+}
+
.disabled {
opacity: 0.5;
cursor: not-allowed;
diff --git a/packages/design-system/lib/components/RateCard/Campaign/index.tsx b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
index bf4d3d5a1..de7b47426 100644
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
@@ -24,6 +24,7 @@ interface CampaignRateCardProps {
isHighlightedRate?: boolean
isHighlightedRateLabel?: boolean
approximateRate?: Rate
+ roomTypeCode: string
handleChange: () => void
handleTermsClick?: () => void
rateTermDetails: RateTermDetails[]
@@ -35,6 +36,7 @@ export default function CampaignRateCard({
rateTitle,
paymentTerm,
rate,
+ roomTypeCode,
memberRate,
approximateRate,
comparisonRate,
@@ -60,8 +62,8 @@ export default function CampaignRateCard({
onPress={handleChange}
className={styles.buttonOverlay}
aria-pressed={isSelected}
- aria-labelledby={`${id}-title`}
- aria-describedby={`${id}-details`}
+ aria-describedby={`${roomTypeCode} ${id}-title`}
+ aria-labelledby={`${id}-details`}
/>
diff --git a/packages/design-system/lib/components/RateCard/Code/index.tsx b/packages/design-system/lib/components/RateCard/Code/index.tsx
index 4cb8f1799..6ed9dce04 100644
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/index.tsx
@@ -19,6 +19,7 @@ interface CodeRateCardProps {
bannerText: string
comparisonRate?: Omit
approximateRate?: Rate
+ roomTypeCode: string
isHighlightedRate?: boolean
handleChange: () => void
handleTermsClick?: () => void
@@ -31,6 +32,7 @@ export default function CodeRateCard({
rateTitle,
paymentTerm,
rate,
+ roomTypeCode,
approximateRate,
comparisonRate,
bannerText,
@@ -53,8 +55,8 @@ export default function CodeRateCard({
onPress={handleChange}
className={styles.buttonOverlay}
aria-pressed={isSelected}
- aria-labelledby={`${id}-title`}
- aria-describedby={`${id}-details`}
+ aria-describedby={`${roomTypeCode} ${id}-title`}
+ aria-labelledby={`${id}-details`}
/>
{bannerText}
diff --git a/packages/design-system/lib/components/RateCard/Points/index.tsx b/packages/design-system/lib/components/RateCard/Points/index.tsx
index 3837a370f..33d06ded1 100644
--- a/packages/design-system/lib/components/RateCard/Points/index.tsx
+++ b/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 (
@@ -49,7 +55,15 @@ export default function PointsRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
-
+
}
@@ -85,8 +99,10 @@ export default function PointsRateCard({
{rates.map((rate, index) => (
@@ -94,6 +110,7 @@ export default function PointsRateCard({
diff --git a/packages/design-system/lib/components/RateCard/Regular/index.tsx b/packages/design-system/lib/components/RateCard/Regular/index.tsx
index ac2749942..e1ab78eb4 100644
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/index.tsx
@@ -21,6 +21,7 @@ interface RegularRateCardProps {
approximateRate?: Rate
isMemberRateActive?: boolean
handleChange: () => void
+ roomTypeCode: string
rateTermDetails: RateTermDetails[]
}
@@ -32,6 +33,7 @@ export default function RegularRateCard({
approximateRate,
omnibusRate,
rate,
+ roomTypeCode,
memberRate,
isMemberRateActive,
handleChange,
@@ -51,8 +53,8 @@ export default function RegularRateCard({
onPress={handleChange}
className={styles.buttonOverlay}
aria-pressed={isSelected}
- aria-labelledby={`${id}-title`}
- aria-describedby={`${id}-details`}
+ aria-describedby={`${roomTypeCode} ${id}-title`}
+ aria-labelledby={`${id}-details`}
/>