From dbc4826a6724bb26da052336aaaf95c23809f98f Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Thu, 9 Jan 2025 16:24:51 +0100
Subject: [PATCH] docs: add accessibility docs for Stepper(StepperStateless)
 component

---
 .../stepper/03-accessibility.mdx              | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx

diff --git a/docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx b/docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx
new file mode 100644
index 0000000000..8e6a1b4618
--- /dev/null
+++ b/docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx
@@ -0,0 +1,55 @@
+---
+title: Accessibility
+redirect_from:
+  - /components/stepper/accessibility/
+---
+
+## Accessibility
+
+The Stepper component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies.
+
+The following props provide additional information to screen readers, enhancing the accessibility of the respective component. By using them, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component's purpose and functionality.
+
+- The `ariaLabel` prop allows you to specify an `aria-label` attribute of the component.
+
+- The `titleDecrement` prop allows you to specify an `aria-label` attribute for the decrement icon button in the Stepper (StepperStateless) component.
+
+- The `titleIncrement` prop allows you to specify an `aria-label` attribute for the increment icon button in the Stepper (StepperStateless) component.
+
+- The `ariaLabelledBy` prop allows you to specify an `aria-labelledby` attribute for the Stepper component. This attribute references the ID of the element that labels the Stepper, ensuring that screen readers announce the label correctly.
+
+Although these props are optional for the Stepper (StepperStateless) component itself, it is recommended to fill them in to ensure that the component can be perceived by assistive technologies.
+
+### Example
+
+```jsx
+<Stepper
+  step={1}
+  minValue={0}
+  minValue={10}
+  ariaLabel="Number of passengers"
+  titleDecrement="Remove a passenger"
+  titleIncrement="Add a passenger"
+/>
+```
+
+The screen reader will announce the input title (`Number of passengers`) and buttons title (`Add a passenger`, `Remove a passenger`) once they are focused by the screen reader.
+
+```jsx
+<Stack>
+  <Stack>
+    <Text id="passengers">Passengers</Text>
+  </Stack>
+  <Stepper
+    step={1}
+    minValue={0}
+    minValue={10}
+    ariaLabel="Number of passengers"
+    aria-labelledby="passengers"
+    titleDecrement="Remove a passenger"
+    titleIncrement="Add a passenger"
+  />
+</Stack>
+```
+
+This example includes `ariaLabelledby` prop. In this case, `ariaLabelledBy` prop is prioritized over `ariaLabel`, so the screen reader will announce the input title (`Passengers`) and buttons title (`Add a passenger`, `Remove a passenger`) once they are focused by the screen reader.