Fixed problem with progress indicator/assistive-text

[kchan902]

… completed steps. Also added in assistive text messages for completed and disabled steps

Fixes #1238 and #1374

Additional description

• Adds assistiveText props
  • activeStep: Label for the active step. The default is Active Step
  • completedStep: Label for a completed step. The default is Completed Step
  • disabledStep: Label for disabled step. The default is Disabled Step
  • errorStep: Label for a step with an error. The default is Error Step
  • step: Label for a step. It will be typically followed by the number of the step such as "Step 1".
• Update error icon
• add aria-current=step

---

Pull Request Review checklist (do not remove)

• npm run lint:fix has been run and linting passes.
• Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.
• Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
• Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
• Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
• While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

[kchan902]

@interactivellama Could you please review this pull request when you have a chance? I am not able to assign it for review. Thank you!

[interactivellama]

Between assistiveText and labels, all text should be able to be replaced to allow internationalization. In the prior code, the following is on the step object, to allow full control.

{props.step.assistiveText || `Step ${props.index + 1}: ${status}`}

"Completed: " can't be changed in this example.

[interactivellama]

Between assistiveText and labels, all text should be able to be replaced to allow internationalization. In the prior code, the following is on the step object, to allow full control.

{props.step.assistiveText || `Step ${props.index + 1}: ${status}`}

"Disabled: " can't be changed in this example.

[salesforce-cla]

Thanks for the contribution! Before we can merge this, we need @kchan902 to sign the Salesforce.com Contributor License Agreement.

[interactivellama]

@arodenbeck Please review https://design-system-react-co-pr-1376.herokuapp.com/?selectedKind=SLDSProgressIndicator&selectedStory=Step%20Error&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel and confirm it fixes the issue you created in January #1238.

[interactivellama]

Summarizing @arodenbeck

• Remove "Active Step"
• Separate disabled and error text from label name with "-". Remove "step" from "Disabled Step" or "Error Step"
• Make label format: ""Step 2: Email Attributes - Disabled"
• disabled step should be a with role=button
• Remove tabindex="0" from progress bar node.

[interactivellama]

Please remove completely from component codebase.

[arodenbeck]

@kchan902 Looking good. I did notice a few cosmetic things which might not exist in production, so let me know if these are irrelevant.

• The step names seem to have the - separator as part of their label. This causes a problem for steps which do not have a Disabled or Error tag at the end. Example "undefined 4: tooltip label Use PropTypes for PicklistBase Function #4 -" There is a trailing -
• The variant "Completed progress", has "Finished step" rather than "Completed." It looked like the messaging can be configured by the person using the component, so was this just defined as an example?
• Several of the variants use a label of "This is custom text in the assistive text key" for the first step. I know it is up to the consuming dev to define the names of the steps, but that's a strange message.
• This might be big enough to stand as its own issue, and I'll be glad to create one separate if you think it necessary. Each step triggers a tooltip on focus with a of the label of the step. I think that was part of the initial design, but that functionality is unnecessary, and doesn't match the current SLDS version. This tooltip style functionality should be removed. (step label is repeated twice and should on be once, should assistive text span be removed)

[kchan902]

@arodenbeck for points 2 and 3, yes it was defined as an example. for point 4, please create a separate issue. thanks!