Skip to content

Fix boolean representation of aria-* and data-* properties on custom elments#36537

Open
MaxwellCohen wants to merge 2 commits into
facebook:mainfrom
MaxwellCohen:fix/32251/custom-elements-aria-attributes
Open

Fix boolean representation of aria-* and data-* properties on custom elments#36537
MaxwellCohen wants to merge 2 commits into
facebook:mainfrom
MaxwellCohen:fix/32251/custom-elements-aria-attributes

Conversation

@MaxwellCohen
Copy link
Copy Markdown

@MaxwellCohen MaxwellCohen commented May 26, 2026

Summary

HTML treats aria-*/ aria-*="true" and data-*/data-*="true" attributes differently; for example, <my-el aria-hidden /> is visible to screen readers accessibility tree, whereas <my-el aria-hidden="true" /> is hidden from screen readers accessibility tree. Issue #32251 reported unexpected behavior where boolean values were not being stringified, and this PR fixes it by stringifying boolean values for aria and data attributes. This leverages the solution approach and thinking from the following PRs: #24541 and #26546, by copying Preact behavior for aria and data attributes. I did not touch the behavior of other properties/attributes, because I think React's choice to use shorthand notation for booleans is a better approach than Preact's.

  • Updated DOMPropertyOperations.js and ReactFizzConfigDOM.js to handle stringification of boolean values for aria and data attributes.
  • Added tests for aria attributes in DOMPropertyOperations-test.js
  • Added tests for data attributes in ReactDOMServerIntegrationAttributes-test.js

fixes: #32251 and #34663

How did you test this change?

  • Created unit tests to cover the scenarios and ran tests to ensure that they all pass.
  • here is the before sandbox and after sandbox

Other considerations

  • This could be considered a breaking change, so it might be part of a major release, if accepted.
  • I am currently duplicating the strification check for aria-* and data-*, and it has been duplicated about 6 times in the code base. This could be moved to a helper function (if/when requested), but I did not because I wanted to limit changes to production code.

I used Composer 2.5 llm to create this PR, but reviewed every line.

@meta-cla meta-cla Bot added the CLA Signed label May 26, 2026
@MaxwellCohen MaxwellCohen marked this pull request as draft May 26, 2026 02:36
@MaxwellCohen MaxwellCohen marked this pull request as ready for review May 26, 2026 02:46
…acebook#36468)

Fixes a regression from facebook#36425 where referenced `FormData` entries can
be dropped by `decodeReplyFromBusboy` when files are interleaved with
text fields in the payload.

`decodeReplyFromBusboy` queues text fields that arrive while a file is
being streamed and flushes them after the last file's `'end'`, working
around busboy emitting `'end'` deferred relative to subsequent `'field'`
events. With multiple files interleaved with text, this loses the
relative order of the affected text entries. The reorder was a
long-standing but invisible issue — entries came back in the wrong order
but were all present — until facebook#36425 tightened how referenced FormData
entries are collected from the backing store to rely on them being
contiguous. With that assumption violated, referenced FormDatas can now
come back with some entries dropped. The pattern is most easily surfaced
through `useActionState` actions that return the submitted `FormData` as
part of their state.

This replaces the tail-flush with a linked list of pending files. Text
fields that arrive while a file is in flight are queued on the tail
file's `queuedFields`; fields that arrive when the list is empty resolve
immediately. `flush()` walks from the head, resolving each completed
file followed by its queued fields, and stops at the first file that
hasn't ended yet. The backing FormData now matches the payload's order,
restoring the contiguity assumption (and fixing the long-standing
reorder as a side effect). The same change is applied to all five copies
in `react-server-dom-{webpack,turbopack,parcel,esm,unbundled}`. Two new
tests cover the multi-file interleave.

fixes vercel/next.js#93822
@MaxwellCohen MaxwellCohen force-pushed the fix/32251/custom-elements-aria-attributes branch from 65834e2 to 8ac4303 Compare May 26, 2026 02:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React 19] aria attributes on custom elements behave maybe incorrectly

2 participants