feat(StepperStateless): add ariaLabel, ariaLive props

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

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md
@@ -61,25 +61,27 @@ import StepperStateless from "@kiwicom/orbit-components/lib/Stepper/StepperState
 
 Table below contains all types of the props available in `StepperStateless` component.
 
-| Name              | Type                        | Default | Description                                             |
-| :---------------- | :-------------------------- | :------ | :------------------------------------------------------ |
-| dataTest          | `string`                    |         | Optional prop for testing purposes.                     |
-| disabled          | `boolean`                   | `false` | If `true`, the Stepper will be disabled.                |
-| disabledIncrement | `boolean`                   |         | If `true`, the increment `Button` will be disabled.     |
-| disabledDecrement | `boolean`                   |         | If `true`, the decrement `Button` will be disabled.     |
-| maxValue          | `number`                    | `∞`     | Specifies the maximum value for the Stepper.            |
-| minValue          | `number`                    | `-∞`    | Specifies the minimum value for the Stepper.            |
-| 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                 |
-| 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. |
-| 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`.       |
-| value             | `number \| string`          |         | Specifies the value of the StepperStateless.            |
+| Name              | Type                               | Default | Description                                                                |
+| :---------------- | :--------------------------------- | :------ | :------------------------------------------------------------------------- |
+| dataTest          | `string`                           |         | Optional prop for testing purposes.                                        |
+| disabled          | `boolean`                          | `false` | If `true`, the Stepper will be disabled.                                   |
+| disabledIncrement | `boolean`                          |         | If `true`, the increment `Button` will be disabled.                        |
+| disabledDecrement | `boolean`                          |         | If `true`, the decrement `Button` will be disabled.                        |
+| maxValue          | `number`                           | `∞`     | Specifies the maximum value for the Stepper.                               |
+| minValue          | `number`                           | `-∞`    | Specifies the minimum value for the Stepper.                               |
+| 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                                    |
+| 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.                    |
+| step              | `number`                           | `1`     | Specifies the value of step to increment and decrement.                    |
+| 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. [See Accessibility](#accessibility). |
+| ariaLive          | `"off" \| "assertive" \| "polite"` |         | Optional prop for `aria-live` value. [See Accessibility](#accessibility).  |
 
 ### Usage:
 

diff --git a/packages/orbit-components/src/Stepper/StepperStateless/index.tsx b/packages/orbit-components/src/Stepper/StepperStateless/index.tsx
@@ -48,6 +48,8 @@ const StepperStateless = ({
   titleDecrement,
   disabledIncrement,
   disabledDecrement,
+  ariaLabel,
+  ariaLive,
 }: Props) => {
   const theme = useTheme();
 
@@ -77,8 +79,8 @@ const StepperStateless = ({
             onDecrement(ev);
           }
         }}
-        title={titleDecrement}
         icons={iconStyles}
+        title={titleDecrement}
       />
       <input
         className={cx(
@@ -103,6 +105,8 @@ const StepperStateless = ({
         }}
         onBlur={onBlur}
         onFocus={onFocus}
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
         readOnly
       />
       <ButtonPrimitive
@@ -115,8 +119,8 @@ const StepperStateless = ({
             onIncrement(ev);
           }
         }}
-        title={titleIncrement}
         icons={iconStyles}
+        title={titleIncrement}
       />
     </div>
   );

diff --git a/packages/orbit-components/src/Stepper/types.d.ts b/packages/orbit-components/src/Stepper/types.d.ts
@@ -15,6 +15,8 @@ export interface SharedProps extends Common.Globals {
   readonly maxWidth?: string | number;
   readonly maxValue?: number;
   readonly minValue?: number;
+  readonly ariaLabel?: string;
+  readonly ariaLive?: "off" | "assertive" | "polite";
   // Deviation from other stepper properties
   readonly titleIncrement?: string;
   readonly titleDecrement?: string;