Skip to content
PatternFly logo

Progress stepper

A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.

A progress stepper is used to provide information to the user about the state of their current progress on a multistep interaction.

Keyboard users use standard keyboard navigation (Tab and Shift + Tab) to move to and between progress steps with popovers. Keyboard users should be able to open the popover on a progress step using Enter or Space, and close the popover using Enter, Space, or Escape.

Screen reader users should be able to discern the label, status, and optional description of every progress step via the aria-label prop. This should include all information being communicated by the progress step's icon, such as the variant and the completed status, as well as whether the step has an associated popover they can trigger. Screen reader users should also be able to access the contents of any popover associated with a step.

The following props/attributes have been added for you and are customizable in PatternFly:

React component
React prop
Which HTML element it appears on in markup
Explanation
ProgressStep
aria-label
.pf-c-progress-stepper__step
Provides an accessible label describing the variant and status of the progress step.

Note: When using a progress stepper in an application, it's also wise to consider how to best summarize the overall progress state to a screen reader user. The basic progress stepper demo demonstrates one approach of using an aria-live region which is updated to contain the progress stepper's status and is visible only to the screen reader.

<div className="pf-screen-reader" aria-live="polite">
  On step 4.
  Step 3 was successful.
</div>

View source on GitHub