[Progress bar] Progress bar component audit

[CrystabelReiter]

Description:

There are 2 types of progress bars on design.va.gov

• Progress bar: Progress bars are visual indicators that represent the completion of a task. Progress bars show how much of the task is completed and what is left.
• Segmented progress bar: Segmented progress bars (Form progress tracker) provide information about progress through a series of steps in a form

Progress bars (specifically the segmented progress bar) in the sketch library, design.va.gov, and react library are out of sync.

You can view the component in design.va.gov and in the react library separated into the progress bar and segmented progress bar

These are the ways this component is not synced

• Inconsistencies in naming- In the sketch library, the segmented progress bar is named the "form progress tracker"
• In the sketch library, the chapter title is above the segmented progress bar when in prod, the chapter title is under the segmented progress bar
• There is no documentation on design.va.gov on when to use progress bars

  Complete the following tasks to synchronize component:

  Sketch library:

• In the artboard, "8-Feedback" rename the "Form progress tracker" "Form progress tracker/ segmented progress bar"

React library:

• Should we have the progress bar and segmented progress bar in the same section like in design.va.gov?

Design.va.gov:

• Add documentation of the progress bar and segmented progress bar to design.va.gov. Draft documentation for progress bar is here and segmented progress bar is here

[joshkimux]

@CrystabelReiter @caw310 as part of this audit, would we also be able to review its accessibility as well? @AngelaFowler82 wrote up a ticket recently on why the progressbar shouldn't have a tabindex=0

[joshkimux]

Linking this to the unresolved accessibility ticket #9226 as well

[bkjohnson]

@GnatalieH here's that update on the components used in app code.

ProgressBar

The <ProgressBar> React component is used in two files:

• Claims status
  • I was unable to login to an appropriate user in staging to get a screenshot of this, but the progress bar should appear in the modal for adding a form.
• FileField in the forms library
  • This can be found in the burials form (the progress bar should appear after you upload a file):

---

SegmentedProgressBar

The <SegmentedProgressBar> React component is also only used in two files:

Forms library

This is the top navigation that's seen on all forms pages, like in the screenshot above

Letters

[caw310]

Closing as the team did an audit in Q2 2022.