Progress bar UI and accessibility issue

[copiali]

• components: progress
• reactstrap version #8.1.1

Issue1.

What is happening?

When value is greater than 100 (or less than 0), width will become greater than 100%(or negative).
https://github.com/reactstrap/reactstrap/blob/8.1.1/src/Progress.js#L68

What should be happening?

Think we should set the max-width to be 100%. And fallback width to 0 if value is negative.

Issue2.

What is happening?

No screenreader text for progress.

What should be happening?

Should add screenreader text for progress.
I added aria-valuetext={screenreaderText} with aria-valuemin, aria-valuemax and aria-valuenow but it is not read aria-valuetext.
After I removed aria-valuemin, aria-valuemax and aria-valuenow then aria-valuetext gets read out. Not sure why.

[TheSharpieOne]

for the first issue, it is really up to the user to provide logical and reasonable values. But I suppose it is fairly easy to constrain/bound/clamp the value to 0 <= percentage <= 100... but we would probably have a11y problems with the raw values which get passed to aria-valuenow and aria-valuemax (aria-valuemin is always 0 (hard-coded), it should probably default to that and be allowed to be overwritten).

Assistive technologies generally will render the value of aria-valuenow as a percent of a range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified. It is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation.

For the second issue, we do not spread the rest of the props on the bar (we do it on the wrapper). I am not sure if other attributes would need to be added to the bar or not, but we should map aria-valuetext to the bar when present.

even with aria-valuetext the aria-valuenow, aria-valuemax, and aria-valuemin should be correct and aria-valuenow should still be within the bounds of aria-valuemax, and aria-valuemin.

[ducan-ne]

my fix is style={{ width: `${Math.min(percent, 100)}%` }}`
is this ok?
with the issue aria-valuetext, i don't sure how to fix it

[jenniferharmon]

According to documentation:

Authors SHOULD only set the aria-valuetext attribute when the rendered value cannot be accurately represented as a number. For example, a slider may have rendered values of small, medium, and large. In this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but the aria-valuetext would be one of the strings: small, medium, or large.

If you want a more friendly or detailed read out, instead of using aria-valuetext you could consider having an aria-labelledby attribute that references a hidden (or visible) element on the page with more a detailed description. For example:

<div id="myLabel" class="hidden">My Current Download Progress:</div>
<div role="progressbar" aria-labelledby="myLabel" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

[copiali]

According to documentation:

Yeah I think you are right. Maybe we can add aria-valuetext and screenreadertext as two optional props?

[TheSharpieOne]

For the second issue, we do not spread the rest of the props on the bar (we do it on the wrapper). I am not sure if other attributes would need to be added to the bar or not, but we should map aria-valuetext to the bar when present.

[yogmel]

Hello everyone,

I see that this is labeled as a "good first issue", but I was wondering if I could work on this, as I have a task that needed the a11y feature.

Thanks!

[Hamjaster]

Is this issue still not resolved, if not , i am interested in it :-)

[TheSharpieOne]

Based on PR #1787, I believe this has been resolved