[ProgressBar] use styled <progress> instead of styled <div>

[marcod1419]

Description

The current ProgressBar does not get picked up at all by screen readers. Therefore, any information given by it is completely inaccessible to those using assistive technology.

This can most likely be improved by incorporating the HTML progress element. (See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)

Another approach worth noting is one used for TELUS Wise, where an implementation similar to this used aria labels to communicate progress. (See screenshot section) However, I believe that using the progress element would provide maximum context for less effort.

Reproduction Steps

• Use VoiceOver to navigate to progress bar
• VoiceOver skips over progress bar

Meta

• TDS version (npm or DSM): v1.0.1
• Willing to develop solution: No
• Has workaround: No
• High impact: No

Screenshots

VoiceOver picking up the HTML progress element:

Existing accessible TELUS progress bar:

Aria attribute preview for existing TELUS accessible progress bar:

[invalidred]

Do we know of a team that uses <Progress />? @bnadeem-telus is the a dev in you tribe that can look into this?