diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md index 664b196b0f..f346ecce98 100644 --- 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 index 5ef658105d..66361b4221 100644 --- a/packages/orbit-components/src/Stepper/Stepper.stories.tsx +++ b/packages/orbit-components/src/Stepper/Stepper.stories.tsx @@ -23,12 +23,19 @@ 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, @@ -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 = { }; export const Rtl: Story = { - render: () => ( + render: args => ( - + ), @@ -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 index 99c92858f6..1246b742eb 100644 --- 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 ( ); };