From 4eae2b6139d1de0d0641243aa0f45498180e01da Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Wed, 8 Jan 2025 19:59:07 +0100 Subject: [PATCH] feat(Stepper): add ariaLabel prop --- .../orbit-components/src/Stepper/README.md | 30 ++++++++++++------- .../src/Stepper/Stepper.stories.tsx | 17 ++++++++--- .../orbit-components/src/Stepper/index.tsx | 4 +++ 3 files changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md index 4d559729c6..60ded54799 100644 --- 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,19 @@ Helper function for validating decrement. Can be used with Stateless Stepper to ```js validateDecrement({ value, minValue, step }); ``` + +## Accessibility + +- The `ariaLabel` prop allows you to specify an `aria-label` attribute for the Stepper input component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using `ariaLabel`, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component's purpose and functionality. + +- The `titleDecrement` prop allows you to specify an `aria-label` attribute for the decrement icon button in the Stepper (StepperStateless) component. This attribute helps screen readers to announce the purpose of the decrement button, making it clear that it decreases the value. + +- The `titleIncrement` prop allows you to specify an `aria-label` attribute for the increment icon button in the Stepper (StepperStateless) component. This attribute helps screen readers to announce the purpose of the increment button, making it clear that it increases the value. + +- The `ariaLive` prop allows you to specify an `aria-live` attribute for the Stepper component. This attribute is used to inform assistive technologies of updates to the content. + +- The `ariaDescribedBy` prop allows you to specify an `aria-describedby` attribute for the Stepper component. This attribute references the IDs of elements that describe the Stepper, providing additional context to screen readers. + +- The `ariaControls` prop allows you to specify an `aria-controls` attribute for the Stepper component. This attribute references the ID of the element that the Stepper controls, helping users understand the relationship between the Stepper and the controlled element. + +- The `ariaLabelledBy` prop allows you to specify an `aria-labelledby` attribute for the Stepper component. This attribute references the ID of the element that labels the Stepper, ensuring that screen readers announce the label correctly. diff --git a/packages/orbit-components/src/Stepper/Stepper.stories.tsx b/packages/orbit-components/src/Stepper/Stepper.stories.tsx index 5ef658105d..ae2382c872 100644 --- 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 = { }; 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..4eeec4f61b 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, + ariaLive, } = props; return (