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/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 })}
     >
       <div className={`${styles.radio} ${classNames}`} />
       <div>{children}</div>

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;