feat(Stepper): add ariaLabel prop

kiwicom · Jan 9, 2025 · deb2c07 · deb2c07
1 parent 8e189ec
commit deb2c07
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md
@@ -31,15 +31,9 @@ Table below contains all types of the props available in Stepper component.
 | onChange       | `number => void \| Promise` |         | Function for handling onClick event.                                          |
 | onFocus        | `event => void \| Promise`  |         | Function for handling onFocus event.                                          |
 | step           | `number`                    | `1`     | Specifies the value of step to increment and decrement.                       |
-| titleDecrement | `string \| (any => string)` |         | Specifies `title` property on decrement `Button`.                             |
-| titleIncrement | `string \| (any => string)` |         | Specifies `title` property on increment `Button`.                             |
-
-### size
-
-| size       |
-| :--------- |
-| `"small"`  |
-| `"normal"` |
+| titleDecrement | `string \| (any => string)` |         | Specifies `ariaLabel` property on decrement `Button`.                         |
+| titleIncrement | `string \| (any => string)` |         | Specifies `ariaLabel` property on increment `Button`.                         |
+| ariaLabel      | `string`                    |         | Optional prop for `aria-label` value. [See Accessibility](#accessibility).    |
 
 ## Functional specs
 
@@ -133,3 +127,19 @@ Helper function for validating decrement. Can be used with Stateless Stepper to
 ```js
 validateDecrement({ value, minValue, step });
 ```
+
+## Accessibility
+
+- The `ariaLabel` prop allows you to specify an `aria-label` attribute for the Stepper input component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using `ariaLabel`, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component's purpose and functionality.
+
+- The `titleDecrement` prop allows you to specify an `aria-label` attribute for the decrement icon button in the Stepper (StepperStateless) component. This attribute helps screen readers to announce the purpose of the decrement button, making it clear that it decreases the value.
+
+- The `titleIncrement` prop allows you to specify an `aria-label` attribute for the increment icon button in the Stepper (StepperStateless) component. This attribute helps screen readers to announce the purpose of the increment button, making it clear that it increases the value.
+
+- The `ariaLive` prop allows you to specify an `aria-live` attribute for the Stepper component. This attribute is used to inform assistive technologies of updates to the content.
+
+- The `ariaDescribedBy` prop allows you to specify an `aria-describedby` attribute for the Stepper component. This attribute references the IDs of elements that describe the Stepper, providing additional context to screen readers.
+
+- The `ariaControls` prop allows you to specify an `aria-controls` attribute for the Stepper component. This attribute references the ID of the element that the Stepper controls, helping users understand the relationship between the Stepper and the controlled element.
+
+- 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.
diff --git a/packages/orbit-components/src/Stepper/Stepper.stories.tsx b/packages/orbit-components/src/Stepper/Stepper.stories.tsx
@@ -23,10 +23,17 @@ export const Default: Story = {
       disable: true,
     },
   },
+
+  args: {
+    ariaLabel: "Passengers number",
+    titleIncrement: "Add a passenger",
+    titleDecrement: "Remove a passenger",
+  },
 };
 
 export const Playground: Story = {
   args: {
+    ...Default.args,
     id: "stepper-ID",
     name: "Passengers number",
     step: 1,
@@ -36,8 +43,6 @@ export const Playground: Story = {
     active: false,
     disabled: false,
     maxWidth: 120,
-    titleIncrement: "Add a passenger",
-    titleDecrement: "Remove a passenger",
     onChange: action("onChange"),
     onFocus: action("onFocus"),
     onBlur: action("onBlur"),
@@ -83,9 +88,9 @@ export const Stateless: Story & StoryObj<typeof StatelessStepper> = {
 };
 
 export const Rtl: Story = {
-  render: () => (
+  render: args => (
     <RenderInRtl>
-      <Stepper />
+      <Stepper {...args} />
     </RenderInRtl>
   ),
 
@@ -95,4 +100,8 @@ export const Rtl: Story = {
       disable: true,
     },
   },
+
+  args: {
+    ...Default.args,
+  },
 };
diff --git a/packages/orbit-components/src/Stepper/index.tsx b/packages/orbit-components/src/Stepper/index.tsx
@@ -46,6 +46,8 @@ const Stepper = ({ onChange, defaultValue = 0, maxWidth = 108, ...props }: Props
     titleIncrement,
     titleDecrement,
     active,
+    ariaLabel,
+    ariaLive,
   } = props;
   return (
     <StepperStateless
@@ -63,6 +65,8 @@ const Stepper = ({ onChange, defaultValue = 0, maxWidth = 108, ...props }: Props
       id={id}
       value={value}
       name={name}
+      ariaLabel={ariaLabel}
+      ariaLive={ariaLive}
       titleIncrement={titleIncrement}
       titleDecrement={titleDecrement}
     />