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

55
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/PaymentOption/index.tsx
View File

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Radio } from "@scandic-hotels/design-system/Radio"
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 "./paymentOption.module.css"
@@ -116,26 +116,39 @@ function InnerPaymentOption({
)}
</div>
{selected && (
<Stepper
count={quantity}
handleOnIncrease={handleOnIncrease}
handleOnDecrease={handleOnDecrease}
disableDecrease={quantity <= 0}
disableIncrease={hasReachedMax || quantity >= MAX_NR_ITEMS}
disabledMessage={
hasReachedMax
? intl.formatMessage({
id: "myPages.myStay.ancillaries.reachedMaxPointsStepperMessage",
defaultMessage:
"You’ve reached your points limit and can’t add more items with points.",
})
: intl.formatMessage({
id: "myPages.myStay.ancillaries.reachedMaxItemsStepperMessage",
defaultMessage:
"Maximum quantity reached for this item.",
})
}
/>
<>
<span id="stepper-quantity-label" className="sr-only">
{intl.formatMessage({
id: "ancillaries.label.quantity",
defaultMessage: "Quantity",
})}
</span>
<Stepper
count={quantity}
label={intl.formatMessage({
id: "ancillaries.label.quantity",
defaultMessage: "Quantity",
})}
ariaLabelledBy="stepper-quantity-label"
handleOnIncrease={handleOnIncrease}
handleOnDecrease={handleOnDecrease}
disableDecrease={quantity <= 0}
disableIncrease={hasReachedMax || quantity >= MAX_NR_ITEMS}
disabledMessage={
hasReachedMax
? intl.formatMessage({
id: "myPages.myStay.ancillaries.reachedMaxPointsStepperMessage",
defaultMessage:
"You’ve reached your points limit and can’t add more items with points.",
})
: intl.formatMessage({
id: "myPages.myStay.ancillaries.reachedMaxItemsStepperMessage",
defaultMessage:
"Maximum quantity reached for this item.",
})
}
/>
</>
)}
</div>
</div>

3
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/index.tsx
View File

@@ -1,4 +1,3 @@
import { type ReactNode } from "react"
import { RadioGroup } from "react-aria-components"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -19,6 +18,8 @@ import { NotEnoughPointsBanner, PaymentOption } from "./PaymentOption"
import styles from "./selectQuantityStep.module.css"
import type { ReactNode } from "react"
import type {
InnerSelectQuantityStepProps,
SelectQuantityStepProps,