Renders a semantic nav element to encapsulate the step links. Given this is a Landmark Region, in order to comply with the General Principles of Landmark Design it is neccessary for it to have an aria-label. The aria-label can be customised by providing the label prop.Implements the roving tabindex pattern when the steps are interactive (see below).When used in linear mode (default), the progressbar role is implemented, providing the additional context of progression within the defined flow to screen readers.
For cases where the steps are not necessarily sequential, the mode can be set to non-linear.In this mode, the activeStep prop is required and the completion of an individual step can be controlled by providing the complete prop to the Step itself.
Steps can be made interactive by providing a handler via the onStepClick prop. This function receives the stepNumber and the id (as provided to the Step component itself).
In linear mode, a user can only interact with previous steps, e.g. steps that come before the current progress.
In linear mode, the step number passed to the progress prop will also be the active step. Any previous step can be made active using the activeStep prop.In non-linear mode, the activeStep prop is required to set the starting point.
The Stepper can be de-emphasized by setting the tone to neutral.This makes the highlight colour follow the default text colour, including inverting on dark surfaces to improve contrast.