scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/STAY-140-stepper-accesible (pull request #3432)

Browse Source 
feat(STAY-140): make Stepper more accessible

* feat(STAY-140): make Stepper more accessible

* fix(STAY-140): add aria-valuetext


Approved-by: Bianca Widstam
This commit is contained in:
Matilda Landström
2026-01-15 12:32:09 +00:00
parent 4b67ffa7fd
commit dd4826dd99
6 changed files with 98 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx
View File

@@ -3,7 +3,7 @@
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Stepper from "@scandic-hotels/design-system/Stepper"
import { Stepper } from "@scandic-hotels/design-system/Stepper"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./adult-selector.module.css"
@@ -42,10 +42,12 @@ export default function AdultSelector({
variant="Body/Supporting text (caption)/smBold"
className={styles.label}
>
<p>{adultsLabel}</p>
<p id="stepper-adults-label">{adultsLabel}</p>
</Typography>
<Stepper
count={currentAdults}
label={adultsLabel}
ariaLabelledBy="stepper-adults-label"
handleOnDecrease={decreaseAdultsCount}
handleOnIncrease={increaseAdultsCount}
disableDecrease={currentAdults == 1}

6
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
View File

@@ -4,7 +4,7 @@ import { useRef } from "react"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Stepper from "@scandic-hotels/design-system/Stepper"
import { Stepper } from "@scandic-hotels/design-system/Stepper"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ChildInfoSelector from "./ChildInfoSelector"
@@ -61,9 +61,11 @@ export default function ChildSelector({
variant="Body/Supporting text (caption)/smBold"
className={styles.label}
>
<p>{childrenLabel}</p>
<p id="stepper-children-label">{childrenLabel}</p>
</Typography>
<Stepper
label={childrenLabel}
ariaLabelledBy="stepper-children-label"
count={currentChildren.length}
handleOnDecrease={() => {
decreaseChildrenCount(roomIndex)