Progress bar

figma:ready
react:ready
scss:ready
freemarker:ready
vue:ready
webComponent:ready

Color accessibility

The progress bar is a user guidance component meaning that it is not critical for the user to see every variation. That said, you must know the if you need an AA accessible progress bar you must use the Default version that uses the color $color-info-600.

Accessibility attributes

The ProgressBar component has been designed to best meet current accessibility criteria.

Therefore, in order to guarantee the accessibility of the component, please make sure to respect the following rules when integrating the component into your pages:

The attribute role="progressbar" must always be present on the .mc-progressbar__indicator element.

The attribute aria-valuemin must always be present on the .mc-progressbar__indicator element.
This attribute defines the minimum value the progression.

The attribute aria-valuemax must always be present on the div.mc-progressbar__indicator.
This attribute defines the maximum allowed value of the progress bar.

If possible, the attribute aria-valuenow should be present on the div.mc-progressbar__indicator.
This attribute indicates in real time the current value of the progression.
If the progression value is undetermined, the developer can omit this attribute.