feat(Stepper): add ariaLabel prop

kiwicom · Jan 17, 2025 · 47030ec · 47030ec
1 parent 7ef9162
commit 47030ec
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 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
 
@@ -72,7 +66,7 @@ Table below contains all types of the props available in `StepperStateless` comp
 | name              | `string`                           |         | The name for the Stepper.                                                  |
 | onBlur            | `event => void \| Promise`         |         | Function for handling onBlur event.                                        |
 | onChange          | `number => void \| Promise`        |         | Function for handling onClick event.                                       |
-| onDecrement       | `event => void \| Promise`         |         | Function for handling decrement event.l                                    |
+| onDecrement       | `event => void \| Promise`         |         | Function for handling decrement event.                                     |
 | onFocus           | `event => void \| Promise`         |         | Function for handling onFocus event.                                       |
 | onIncrement       | `event => void \| Promise`         |         | Function for handling increment event.                                     |
 | onKeyDown         | `event => void \| Promise`         |         | Function for handling onKeyDown event present on input.                    |
@@ -133,3 +127,14 @@ Helper function for validating decrement. Can be used with Stateless Stepper to
 ```js
 validateDecrement({ value, minValue, step });
 ```
+
+## Accessibility
+
+The following attributes 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.
+
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}
     />