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.

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

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">

According to documentation:

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

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.

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!