Skip to content

Commit 0eb641f

Browse files
Progress Indicator: Add assistive text options
assistiveText: { activeStep: 'Active Step', completedStep: 'Completed Step', disabledStep: 'Disabled Step', errorStep: 'Error Step', step: 'Step' },
1 parent 1f6bf1c commit 0eb641f

File tree

1 file changed

+23
-5
lines changed

1 file changed

+23
-5
lines changed

components/progress-indicator/index.jsx

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,19 @@ const propTypes = {
2626
/**
2727
* **Assistive text for accessibility**
2828
* This object is merged with the default props object on every render.
29-
* * `percentage`: Label for Progress Bar. The default is `Progress: [this.props.value]%`
29+
* * `activeStep`: Label for the active step. The default is `Active Step`
30+
* * `completedStep`: Label for a completed step. The default is `Completed Step`
31+
* * `disabledStep`: Label for disabled step. The default is `Disabled Step`
32+
* * `errorStep`: Label for a step with an error. The default is `Error Step`
33+
* * `percentage`: Label for Progress Bar. The default is `Progress: [this.props.value]%`. You will need to calculate the percentage yourself if changing this string.
34+
* * `step`: Label for a step. It will be typically followed by the number of the step such as "Step 1".
3035
*/
3136
assistiveText: PropTypes.shape({
32-
percentage: PropTypes.string,
37+
activeStep: PropTypes.string,
3338
completedStep: PropTypes.string,
34-
disabledStep: PropTypes.string
39+
disabledStep: PropTypes.string,
40+
percentage: PropTypes.string,
41+
step: PropTypes.string,
3542
}),
3643
/**
3744
* CSS class names to be added to the container element. `array`, `object`, or `string` are accepted.
@@ -108,7 +115,13 @@ const defaultSteps = [
108115
];
109116

110117
const defaultProps = {
111-
assistiveText: {},
118+
assistiveText: {
119+
activeStep: 'Active Step',
120+
completedStep: 'Completed Step',
121+
disabledStep: 'Disabled Step',
122+
errorStep: 'Error Step',
123+
step: 'Step'
124+
},
112125
errorSteps: [],
113126
completedSteps: [],
114127
disabledSteps: [],
@@ -171,7 +184,12 @@ class ProgressIndicator extends React.Component {
171184
? assign({}, defaultProps.assistiveText, this.props.assistiveText)
172185
: defaultProps.assistiveText;
173186

174-
const {selectedStep, disabledSteps, errorSteps, completedSteps} = this.props;
187+
const {
188+
selectedStep,
189+
disabledSteps,
190+
errorSteps,
191+
completedSteps,
192+
} = this.props;
175193
/** 1. preparing data */
176194
const allSteps = this.getSteps();
177195

0 commit comments

Comments
 (0)