Merged in fix/book-115-hidden-focus-indicators (pull request #2925)

Fix/book 115 hidden focus indicators

* added focus ring to "how it works" text and close button in modal

* fix(BOOK-115): added focus ring to Hotel Sidepeek close button

* fix(BOOK-115): enabled selecting ancillaries with keyboard nav

* fix(BOOK-115): added focus indicator to "View and print receipt" in Manage Stay

* fix(BOOK-105 & BOOK-115): combined the two radio groups in payment selection to one, fixes focus indicator issue

* fix(BOOK-115): added focus indicator to shortcut links

* fix(BOOK-115): updated ancillaries keyboard selection

* fix(BOOK-115): removed tabIndex from Link component

* fix(BOOK-115): fixed single payment radio button not focusable

* fix(BOOK-115): updated  to onKeyDown

* added id to "credit card"

* removed toUpperCase() on lables

* removed brackets

* moved the focus indicator to the DS Button component

* removed !important from ButtonLink css

* changed <label> to <fieldset> and <legend> and added aria-label to PaymentOptionGroup

* removed css class from sidepeek that was previously removed

* reverted changes and synced Guarantee radiogroup with Payment radiogroup to use same semantics

* removed duplicate label

* removed old sub heading


Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Haneling
2025-11-07 07:58:14 +00:00
parent fdf124bd0c
commit 2d237b8d14
14 changed files with 124 additions and 121 deletions

View File

@@ -2,7 +2,7 @@
import { useContext, useRef } from 'react'
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
import { IconButton } from '../IconButton'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'
@@ -10,7 +10,6 @@ import { SidePeekContext } from './SidePeekContext'
import SidePeekSEO from './SidePeekSEO'
import { IconButton } from '../IconButton'
import styles from './sidePeek.module.css'
interface SidePeekProps {
@@ -63,8 +62,8 @@ export default function SidePeek({
<IconButton
theme="Black"
style="Muted"
onPress={onClose}
aria-label={closeLabel}
onPress={onClose}
>
<MaterialIcon
icon="close"