Accesible Progress Bar

[HectorSancho]

Goal

Resolve the progress bar accesibility issues

Context

We have two accesibility problems with the current definition of the progress bar:

• Contrats between control activated and control in some brands
• Contrast between the token control and a white background (don't pass double AA contrast)

Impact

Variable, in some proposals the changes would affect the component's structure. Other options only require change of tokens

Discussion Questions

• Should color of tokens be 100% accesible? or are there other ways to ensure acccesibility depending of the context? (ejem helper texts)
• Should this component pass accessibility tests or is it a complementary element to a data or visual support in other cases?

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/3ovTLfO36BHwD1NxoBaHES/Progress-Bar-accesibility-explorations?type=design&node-id=4%3A17&mode=design&t=lrAUYyOWWTDiuCPu-1

[HectorSancho]

Screenshot:

Material Design reference: https://m3.material.io/components/progress-indicators/accessibility

[aweell]

Another topic that we need to consider about the progress bars is avoid failing:

SC 1.4.1. Use of Color (Level A)

Now we delegate this responsibility in the correct usage of the component in a context that displays a textual information related to the value of the progress bar and also min and max values.

Should be something we also provide by default with the possibility of overrides?

[aweell]

The options that I see (to avoid failing 1.4.1)

• These blocks are already predefined and we pass the label internally like the live blocks
• We put the label on it, conditioning the use cases and that that has to be used.
• We give you a prop label that can come empty, if you fill it out you paint the default label, if you want another one you pass it through labeledby as before
• It stays as it is, which is that you paint the label however you want and use labelledby

The last two points delegate responsibility to the teams.

[aweell]

I add here the problems that are added when adapting the progress to work in inverse contexts.

Here a solution similar to A.1 proposal