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

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;