From deb2c0772106f2e9d50650569c34f0780f7131db 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 | 28 +++++++++++++------ .../src/Stepper/Stepper.stories.tsx | 17 ++++++++--- .../orbit-components/src/Stepper/index.tsx | 4 +++ 3 files changed, 36 insertions(+), 13 deletions(-) diff --git a/packages/orbit-components/src/Stepper/README.md b/packages/orbit-components/src/Stepper/README.md index 4d559729c6..5e0e9b2e49 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 @@ -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 (