From 8e189ec73f76c0affbba96f919fa5b87552bfb35 Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Wed, 8 Jan 2025 19:57:20 +0100 Subject: [PATCH] feat(StepperStateless): add ariaLabel, ariaLive props --- .../orbit-components/src/Stepper/README.md | 40 ++++++++++--------- .../src/Stepper/StepperStateless/index.tsx | 8 +++- .../orbit-components/src/Stepper/types.d.ts | 2 + 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md index 664b196b0f..4d559729c6 100644 --- 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 index f2e37b7801..6340d6d186 100644 --- 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} /> ); diff --git a/packages/orbit-components/src/Stepper/types.d.ts b/packages/orbit-components/src/Stepper/types.d.ts index be5ee55efb..6f1adb2f77 100644 --- 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;