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

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

@@ -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>

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

@@ -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,

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

@@ -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}

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

@@ -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)

packages/design-system/lib/components/Stepper/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from "react-intl"
 import { IconButton } from "../IconButton"
 import { Tooltip } from "../Tooltip"
 import { Typography } from "../Typography"
@@ -6,6 +7,8 @@ import styles from "./stepper.module.css"
 
 type StepperProps = {
   count: number
+  label: string
+  ariaLabelledBy: string
   handleOnIncrease: () => void
   handleOnDecrease: () => void
   disableIncrease: boolean
@@ -13,28 +16,56 @@ type StepperProps = {
   disabledMessage?: string
 }
 
-export default function Stepper({
+export function Stepper({
   count,
+  label,
+  ariaLabelledBy,
   handleOnIncrease,
   handleOnDecrease,
   disableIncrease,
   disableDecrease,
   disabledMessage,
 }: StepperProps) {
+  const intl = useIntl()
+
   return (
-    <div className={styles.counterContainer}>
+    <div
+      role="group"
+      aria-labelledby={ariaLabelledBy}
+      className={styles.counterContainer}
+    >
       <IconButton
+        type="button"
         className={styles.counterBtn}
         onPress={handleOnDecrease}
         variant="Elevated"
         isDisabled={disableDecrease}
         iconName="remove"
+        aria-label={intl.formatMessage(
+          {
+            id: "designSystem.stepper.ariaLabel.decrease",
+            defaultMessage: "Decrease {label}",
+          },
+          { label }
+        )}
+        aria-valuetext={intl.formatMessage(
+          {
+            id: "designSystem.stepper.ariaLabel.currentCount",
+            defaultMessage: "Current {label} {count}",
+          },
+          { label, count }
+        )}
       />
-      <div className={styles.countDisplay}>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p>{count}</p>
-        </Typography>
-      </div>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <span
+          aria-live="polite"
+          aria-atomic="true"
+          className={styles.countDisplay}
+        >
+          {count}
+        </span>
+      </Typography>
+
       <Tooltip
         text={disabledMessage}
         isVisible={Boolean(disabledMessage && disableIncrease)}
@@ -43,11 +74,26 @@ export default function Stepper({
         isTouchable
       >
         <IconButton
+          type="button"
           className={styles.counterBtn}
           onPress={handleOnIncrease}
           variant="Elevated"
           isDisabled={disableIncrease}
           iconName="add"
+          aria-label={intl.formatMessage(
+            {
+              id: "designSystem.stepper.ariaLabel.increase",
+              defaultMessage: "Increase {label}",
+            },
+            { label }
+          )}
+          aria-valuetext={intl.formatMessage(
+            {
+              id: "designSystem.stepper.ariaLabel.currentCount",
+              defaultMessage: "Current {label} {count}",
+            },
+            { label, count }
+          )}
         />
       </Tooltip>
     </div>

packages/design-system/lib/components/Stepper/stepper.module.css

@@ -5,6 +5,7 @@
   gap: var(--Space-x1);
   color: var(--Text-Interactive-Default);
 }
+
 .counterBtn {
   width: 40px;
   height: 40px;