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

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

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}