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

@@ -20,6 +20,8 @@ import { fade, slideInOut } from './motionVariants'
 import styles from './modal.module.css'
 import { Typography } from '../../Typography'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { IconButton } from '../../IconButton'
+import { useIntl } from 'react-intl'
 
 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -35,6 +37,8 @@ function InnerModal({
   subtitle,
   hideHeader,
 }: PropsWithChildren<InnerModalProps>) {
+  const intl = useIntl()
+
   function modalStateHandler(newAnimationState: AnimationState) {
     setAnimation((currentAnimationState) =>
       newAnimationState === AnimationStateEnum.hidden &&
@@ -86,14 +90,17 @@ function InnerModal({
                       </Typography>
                     )}
                   </div>
-
-                  <button
-                    onClick={close}
-                    type="button"
-                    className={styles.close}
+                  <IconButton
+                    theme="Black"
+                    style="Muted"
+                    onPress={close}
+                    aria-label={intl.formatMessage({
+                      id: 'common.close',
+                      defaultMessage: 'Close',
+                    })}
                   >
-                    <MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
-                  </button>
+                    <MaterialIcon icon="close" size={24} color="CurrentColor" />
+                  </IconButton>
                 </header>
               )}
 

packages/design-system/lib/components/RateCard/Modal/modal.module.css

@@ -53,13 +53,6 @@
   padding: var(--Space-x3);
 }
 
-.close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
 @media screen and (min-width: 768px) {
   .overlay {
     display: flex;