Skip to content

Commit cca86fb

Browse files
sarkaaasarkaaa
committed
feat(Stepper): add ariaDescribedby prop and rename ariaLabelledBy to improve a11y
BREAKING CHANGE: Prop ariaLabelledBy was changed to ariaLabelledby in the Stepper component.
1 parent 019514a commit cca86fb

File tree

3 files changed

+36
-25
lines changed

3 files changed

+36
-25
lines changed

‎packages/orbit-components/src/Stepper/README.md

+24-22
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,28 @@ After adding import into your project you can use it simply like:
1616

1717
Table below contains all types of the props available in Stepper component.
1818

19-
| Name | Type | Default | Description |
20-
| :------------- | :-------------------------- | :------ | :---------------------------------------------------------------------------- |
21-
| dataTest | `string` | | Optional prop for testing purposes. |
22-
| id | `string` | | Set `id` for `Stepper` |
23-
| maxWidth | `boolean` | `108px` | Set `max-width`for `Stepper` wrapper |
24-
| active | `boolean` | | Changes the color of the `Stepper` |
25-
| defaultValue | `number` | `0` | Specifies the value of the Stepper. [See Functional specs](#functional-specs) |
26-
| disabled | `boolean` | `false` | If `true`, the Stepper will be disabled. |
27-
| maxValue | `number` | `∞` | Specifies the maximum value for the Stepper. |
28-
| minValue | `number` | `-∞` | Specifies the minimum value for the Stepper. |
29-
| name | `string` | | The name for the Stepper. |
30-
| onBlur | `event => void \| Promise` | | Function for handling onBlur event. |
31-
| onChange | `number => void \| Promise` | | Function for handling onClick event. |
32-
| onFocus | `event => void \| Promise` | | Function for handling onFocus event. |
33-
| step | `number` | `1` | Specifies the value of step to increment and decrement. |
34-
| titleDecrement | `string \| (any => string)` | | Specifies `aria-label` property on decrement `Button`. |
35-
| titleIncrement | `string \| (any => string)` | | Specifies `aria-label` property on increment `Button`. |
36-
| ariaLabelValue | `string` | | Optional prop for `aria-label` value. |
37-
| ariaLabelledBy | `string` | | Optional prop for `aria-labelledby` value. |
19+
| Name | Type | Default | Description |
20+
| :------------------- | :-------------------------- | :------ | :---------------------------------------------------------------------------------------- |
21+
| dataTest | `string` | | Optional prop for testing purposes. |
22+
| id | `string` | | Set `id` for `Stepper`. |
23+
| maxWidth | `boolean` | `108px` | Set `max-width`for `Stepper` wrapper. |
24+
| active | `boolean` | | Changes the color of the `Stepper`. |
25+
| defaultValue | `number` | `0` | Specifies the value of the Stepper. [See Functional specs](#functional-specs) |
26+
| disabled | `boolean` | `false` | If `true`, the Stepper will be disabled. |
27+
| maxValue | `number` | `∞` | Specifies the maximum value for the Stepper. |
28+
| minValue | `number` | `-∞` | Specifies the minimum value for the Stepper. |
29+
| name | `string` | | The name for the Stepper. |
30+
| onBlur | `event => void \| Promise` | | Function for handling onBlur event. |
31+
| onChange | `number => void \| Promise` | | Function for handling onClick event. |
32+
| onFocus | `event => void \| Promise` | | Function for handling onFocus event. |
33+
| step | `number` | `1` | Specifies the value of step to increment and decrement. |
34+
| titleDecrement | `string` | | Specifies `aria-label` property on decrement `Button`. See accessibility tab. |
35+
| titleIncrement | `string` | | Specifies `aria-label` property on increment `Button`. See accessibility tab. |
36+
| ariaLabelValue | `string` | | Optional prop for `aria-label` value for input field. See accessibility tab. |
37+
| ariaLabelledby | `string` | | Optional prop for `aria-labelledby` value for input field. See accessibility tab. |
38+
| ariaDescribedby | `string` | | Optional prop for `aria-describedby` value for input field. See accessibility tab. |
39+
| descriptionDecrement | `string` | | Optional prop for `aria-describedby` value for decrement `Button`. See accessibility tab. |
40+
| descriptionIncrement | `string` | | Optional prop for `aria-describedby` value for increment `Button`. See accessibility tab. |
3841

3942
## Functional specs
4043

@@ -67,7 +70,7 @@ Table below contains all types of the props available in `StepperStateless` comp
6770
| name | `string` | | The name for the Stepper. |
6871
| onBlur | `event => void \| Promise` | | Function for handling onBlur event. |
6972
| onChange | `number => void \| Promise` | | Function for handling onClick event. |
70-
| onDecrement | `event => void \| Promise` | | Function for handling decrement event.l |
73+
| onDecrement | `event => void \| Promise` | | Function for handling decrement event. |
7174
| onFocus | `event => void \| Promise` | | Function for handling onFocus event. |
7275
| onIncrement | `event => void \| Promise` | | Function for handling increment event. |
7376
| onKeyDown | `event => void \| Promise` | | Function for handling onKeyDown event present on input. |
@@ -80,12 +83,11 @@ Table below contains all types of the props available in `StepperStateless` comp
8083
| ariaDescribedby | `string` | | Optional prop for `aria-describedby` value for input field. See accessibility tab. |
8184
| descriptionDecrement | `string` | | Optional prop for `aria-describedby` value for decrement `Button`. See accessibility tab. |
8285
| descriptionIncrement | `string` | | Optional prop for `aria-describedby` value for increment `Button`. See accessibility tab. |
83-
| ariaDescribedby | `string` | | Optional prop for `aria-describedby` value for input field. See accessibility tab. |
8486

8587
### Usage:
8688

8789
```jsx
88-
<StepperStateless value={"2 adults"} />
90+
<StepperStateless value="2 adults" />
8991
```
9092

9193
## Helper functions

‎packages/orbit-components/src/Stepper/index.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,12 @@ const Stepper = ({ onChange, defaultValue = 0, maxWidth = 108, ...props }: Props
4545
maxValue,
4646
titleIncrement,
4747
titleDecrement,
48+
descriptionIncrement,
49+
descriptionDecrement,
4850
active,
4951
ariaLabelValue,
50-
ariaLabelledBy,
52+
ariaLabelledby,
53+
ariaDescribedby,
5154
} = props;
5255
return (
5356
<StepperStateless
@@ -66,9 +69,12 @@ const Stepper = ({ onChange, defaultValue = 0, maxWidth = 108, ...props }: Props
6669
value={value}
6770
name={name}
6871
ariaLabelValue={ariaLabelValue}
69-
ariaLabelledBy={ariaLabelledBy}
72+
ariaLabelledby={ariaLabelledby}
73+
ariaDescribedby={ariaDescribedby}
7074
titleIncrement={titleIncrement}
7175
titleDecrement={titleDecrement}
76+
descriptionIncrement={descriptionIncrement}
77+
descriptionDecrement={descriptionDecrement}
7278
/>
7379
);
7480
};

‎packages/orbit-components/src/Stepper/types.d.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,13 @@ export interface SharedProps extends Common.Globals {
1616
readonly maxValue?: number;
1717
readonly minValue?: number;
1818
readonly ariaLabelValue?: string;
19-
readonly ariaLabelledBy?: string;
19+
readonly ariaLabelledby?: string;
20+
readonly ariaDescribedby?: string;
2021
// Deviation from other stepper properties
2122
readonly titleIncrement?: string;
2223
readonly titleDecrement?: string;
24+
readonly descriptionIncrement?: string;
25+
readonly descriptionDecrement?: string;
2326
// Deviation from common event format onChange
2427
readonly onFocus?: Event;
2528
readonly onBlur?: Event;

0 commit comments

Comments
 (0)