feat(Stepper): add ariaLabel, ariaLabelledBy props

kiwicom · Jan 21, 2025 · 9ea58a1 · 9ea58a1
1 parent b461e1a
commit 9ea58a1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md
@@ -31,15 +31,10 @@ 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.                                         |
+| ariaLabelledBy | `string`                    |         | Optional prop for `aria-labelledby` value.                                    |
 
 ## Functional specs
 
@@ -77,9 +72,11 @@ Table below contains all types of the props available in `StepperStateless` comp
 | onIncrement       | `event => void \| Promise`  |         | Function for handling increment event.                  |
 | onKeyDown         | `event => void \| Promise`  |         | Function for handling onKeyDown event present on input. |
 | 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`.       |
+| titleDecrement    | `string \| (any => string)` |         | Specifies `ariaLabel` property on decrement `Button`.   |
+| titleIncrement    | `string \| (any => string)` |         | Specifies `ariaLabel` property on increment `Button`.   |
 | value             | `number \| string`          |         | Specifies the value of the StepperStateless.            |
+| ariaLabel         | `string`                    |         | Optional prop for `aria-label` value.                   |
+| ariaLabelledBy    | `string`                    |         | Optional prop for `aria-labelledby` value.              |
 
 ### Usage:
 

diff --git a/packages/orbit-components/src/Stepper/Stepper.stories.tsx b/packages/orbit-components/src/Stepper/Stepper.stories.tsx
@@ -23,21 +23,26 @@ export const Default: Story = {
       disable: true,
     },
   },
+
+  args: {
+    ariaLabel: "Number of passengers",
+    titleIncrement: "Add a passenger",
+    titleDecrement: "Remove a passenger",
+  },
 };
 
 export const Playground: Story = {
   args: {
+    ...Default.args,
     id: "stepper-ID",
-    name: "Passengers number",
+    name: "Number of passengers",
     step: 1,
     minValue: 0,
     maxValue: 20,
     defaultValue: 0,
     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,
+    ariaLabelledBy,
   } = props;
   return (
     <StepperStateless
@@ -63,8 +65,10 @@ const Stepper = ({ onChange, defaultValue = 0, maxWidth = 108, ...props }: Props
       id={id}
       value={value}
       name={name}
+      ariaLabel={ariaLabel}
       titleIncrement={titleIncrement}
       titleDecrement={titleDecrement}
+      ariaLabelledBy={ariaLabelledBy}
     />
   );
 };