`ProgressBar` and `Meter` produce `NaN` percentage when `minValue === maxValue`

[lixiaoyan]

Provide a general summary of the issue here

When <ProgressBar> or <Meter> is rendered with minValue === maxValue (e.g. value={0}, maxValue={0} with the default minValue={0}), the internally computed percentage is NaN. This propagates into the render-prop percentage value and into aria-valuetext.

🤔 Expected Behavior?

When the range is empty (minValue === maxValue), percentage should resolve to 0 rather than NaN.

😯 Current Behavior

In both packages/react-aria-components/src/ProgressBar.tsx and packages/react-aria-components/src/Meter.tsx, the computation is:

let percentage = ((value - minValue) / (maxValue - minValue)) * 100;

With value = 0, minValue = 0, maxValue = 0, this evaluates to 0 / 0 = NaN. There is no guard. Consequences:

• The render-prop {({ percentage }) => …} receives NaN. Consumer code such as style={{ width: `${percentage}%` }} produces the string "NaN%", which browsers reject — the fill collapses.
• aria-valuetext is formatted from NaN via Intl.NumberFormat, so screen readers announce "NaN%".

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/hg7dmnxk?file=src%2FExample.tsx

Version

react-aria-components@1.17.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Can you say more about why the min and max value would be equal?

[lixiaoyan]

@snowystinger In our use case, we use a progress bar to display the completion progress of tasks within a workflow. However, a newly created workflow may not have any tasks yet. In this scenario, we still display "0/0", which means that value, minValue (the default), and maxValue are all 0.

[snowystinger]

Just trying to understand a bit more. Thanks for bearing with me.

Is a workflow valid if it has 0 tasks? Could you auto create a blank one to start the user off? I assume that's the first thing the user would do anyways?

Or could you not display the progress bar since it doesn't reference anything?

You say that 0/0 should be 0%, but should it actually be 100% since there's nothing to do? are there use cases for anything other than 0/0?

[lixiaoyan]

We're refactoring our site with React Aria. This may not be best practice, but we most likely won't change it in the first phase, so we still need to render a 0/0 progress bar. I also checked the ARIA spec and didn't find a requirement that min must be strictly less than max—the spec permits them being equal, although it can cause various issues.

Given our current scenario, would you recommend setting max to at least 1 even when the total task count is 0?

[snowystinger]

In theory I'm fine with it. But we'll need to do some testing with assistive technologies. Here's a general list we'll want to check out:

• Safari + VO
• Chrome + VO
• iOS Safari + VO
• Chrome + TalkBack
• Firefox + TalkBack
• Chrome + NVDA
• JAWS

[mvanhorn]

Submitted a fix in #10169.