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/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;