docs: add accessibility docs for Stepper(StepperStateless) component

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.