[Bug]: Numeric zero content is treated as empty in CounterBadge and InfoLabel #36992

Component

Counter Badge

Package version

@fluentui/react-badge 9.5.7; @fluentui/react-infolabel 9.4.28

React version

18.3.1 (react and react-dom)

Environment

macOS; embedded in-app Chromium browser, UA Chrome/156.0.0.0; viewport 1280x720.
Node 24.19.0 for local bundling/SSR. Official npm packages pinned above; same conditions remain on master 6d3e9d686434d69ac8fc9ca4c4a93f3afaa3d676.
This is a minimal synthetic local UI reproduction, not a deployed Microsoft product.

Current Behavior

1. {0} shows 7 instead of the explicit child 0. The equivalent child "0" is preserved.
2. Recorded attempts has no automatic information button. info="0" creates one and opens content 0.

Both accept a number-valued node in the public types. This can affect labels derived from numeric results that happen to be zero.

Expected Behavior

Preserve explicit number 0 as content, consistently with the string "0": CounterBadge displays 0 and InfoLabel provides its information button and content.

Reproduction

https://codesandbox.io/s/xrkl29

Steps to reproduce

1. The linked minimal sandbox pins React/React DOM18.3.1, react-badge9.5.7 and react-infolabel9.4.28. It places numeric0 and string0 cases side-by-side.
2. Compare the two CounterBadge examples (count7) and the two InfoLabel examples.
3. Numeric badge shows7; string badge shows0. Only the string InfoLabel initially has an information button.

Self-contained core:

<CounterBadge count={7}>{0}</CounterBadge>
<CounterBadge count={7}>{"0"}</CounterBadge>
<InfoLabel info={0}>Recorded attempts</InfoLabel>
<InfoLabel info="0">Recorded attempts</InfoLabel>

CodeSandbox's Define API returned sandbox id xrkl29 for the archived minimal source. Its editor currently presents a Cloudflare check here and its preview cannot be loaded by this browser client. I have not verified online execution; the browser result below is from the pinned official components in a local synthetic fixture.

Source:

• useCounterBadge.ts#L48 uses !state.root.children before replacing content.
• useCounterBadgeStyles.styles.ts#L35 also hides falsy children.
• useInfoLabel.ts#L52 uses renderByDefault: !!info.
  Paths are under packages/react-components/*/library/src/components at commit 6d3e9d6.

Local repair experiment (3 conditions):

- !state.root.children
+ !state.root.children && state.root.children !== 0

Apply this narrowly in both CounterBadge conditions (content defaulting and hidden style).

- renderByDefault: !!info
+ renderByDefault: !!info || info === 0

Real browser verification: numeric badge changed7→0 and computed display remained inline-flex with20x20 geometry; numeric InfoLabel gained one button, and clicking it opened visible note text0. String0, default badge count7, custom text, absent info and explicit-info-button controls retained their behavior (9 cases; 2 changed, 7 controls). The initial two-condition experiment left the badge display:none; that was caught in the browser and the final experiment includes the style condition. Also checked23 SSR hook cases (2 fixes,21 controls). No full Nx/upstream suite or other browser engines are claimed.

Related/duplicate check: #23232 is an older closed report about arbitrary children hidden when count defaults to0; this specific example uses nonzero count7 and explicit numeric0. #35110 fixes a different Badge icon-margin falsy0 condition. #36953 is headless InfoLabel aria-owns work and is outside this report. Recorded issue and all-state PR searches found no existing fix for these exact two cases; please consolidate if you track them together elsewhere.

Workaround: String(value) for these two inputs. No deployed products are claimed affected. AI assistance was used for analysis/patch preparation; the behavior and final repair were verified in a real local browser.

Are you reporting an Accessibility issue?

no

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

None claimed; synthetic local component examples only.

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.