Warn when NaN is passed as an aria-* attribute value#36340
Warn when NaN is passed as an aria-* attribute value#36340starboyvarun wants to merge 3 commits intofacebook:mainfrom
Conversation
aria-* attributes bypass the existing NaN check in ReactDOMUnknownPropertyHook because they return early before that check is reached. When a NaN number reaches the DOM it gets stringified to "NaN", which is invalid for every ARIA attribute type and is almost always a developer mistake (e.g. a missing guard around a computed numeric value). This adds the same NaN check directly inside ReactDOMInvalidARIAHook so that any valid aria-* attribute receiving a NaN value produces a clear warning in development, matching the message already used for non-aria attributes.
liufang88789-ui
left a comment
There was a problem hiding this comment.
Nice fix. The NaN → "NaN" stringification in the DOM is an insidious silent bug, especially since computed numeric values (like derived state from findIndex returning -1) flow into aria-* props frequently.
The placement is right — checking in validateProperty before the return, and mirroring the existing error message pattern keeps it consistent with the rest of the hook. Passing props[key] as the third argument is minimal and clean.
One edge case worth considering: what about Infinity? It has the same stringification problem ("Infinity" is equally invalid for aria attributes), though it's less common in practice. Not necessarily a blocker for this PR, just something to keep in mind.
Extends the non-finite check from isNaN to !isFinite so that Infinity and
-Infinity are caught alongside NaN. All three stringify to invalid DOM values
("NaN", "Infinity", "-Infinity") that violate the ARIA spec. The error message
now prints the actual received value so the developer knows exactly what came
through.
|
@liufang88789-ui , Added two more test cases for |
Summary
aria-* attributes currently bypass the NaN check in
ReactDOMUnknownPropertyHookbecause they return early (line 97-99 of that file) before the check is reached. When aNaNnumber flows through, the DOM stringifies it to the literal string"NaN", which is invalid for every ARIA attribute type and silently breaks accessibility.This is a common pitfall when a computed numeric value is derived from user data or state that can be undefined/null:
Changes:
ReactDOMInvalidARIAHook.js— extendvalidatePropertyto accept the propvalueand add aNaNcheck for valid, correctly-cased aria-* attributes. Mirrors the warning message already used byReactDOMUnknownPropertyHookfor non-aria attributes.ReactDOMInvalidARIAHook-test.js— three new test cases: NaN on a numeric aria attribute (aria-valuenow), NaN on a string-type aria attribute (aria-label), and no false-positive for valid integers.Test plan
yarn test ReactDOMInvalidARIAHook— all tests pass (new + existing)validatePropertysignature changes (internal)