AVT 3 - Progress Indicator has several screen reader issues

[snidersd]

Environment

macOS Mojave version 10.14.6
Chrome Version Version 77.0.3865.90
Carbon v10 - React

Detailed Description

1. Go to the Progress Indicator Default Component
2. Start VoiceOver
3. Control-Option-Shift to enter the Web area. VoiceOver announces you are in a list with 5 items.
4. All items in the list are read as buttons, but only steps 2 & 3 are in the tab order.

Expected Result:

1. All buttons should be in the tab order and the user advised that its a link.
2. The state of the first button would indicate that it is complete.
3. The state of the second button would indicate it is the current step.
4. The state of the third step as not started or incomplete.
5. The fifth button should let the user know that it is disabled when read.

[joshblack]

It seems like the idea here would be:

• Progress Indicator is implemented as a <ol> because the step order matters
• Steps could be implemented as a <button> or as a <a>, depending on if steps are local or tied to a route
• "Status" could be communicate through a visually hidden <span> before the step name and would communicate:
  • Complete
  • In progress / current
  • Incomplete
  • Disabled

Questions:

• If the steps are tied to routes, would <nav> or navigation be appropriate? Similarly, aria-current for the exact route
• If a button is disabled, should it be in tab order sequence?
• What should happen if a user backtracks through the wizard? Is there an interruptor around losing work? How is this transition communicated?

cc @dakahn

Examples & Resources

• https://www.w3.org/WAI/tutorials/forms/multi-page/#using-step-by-step-indicator