Field on the server: the control's `aria-describedby` names ids no element has, so an error is not announced before hydration

Open
  • Is something wrong?
#520 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
accessibility, frontend

Research direction

Start from the Field component in the @ui-sdk/solid/field package and the code that builds aria-describedby for FieldControl, then compare it with the FieldError id it renders. Run the reproduction with Solid renderToString and check whether the ids on the server match the ones written after hydration. Done means the server output lists only the description and error ids that actually render, with the error's id matching its reference, and the reference is omitted when a part is absent.

Written by the indexing model from the issue text.

Description

What happens

A Field rendered on the server gives its control aria-describedby="<id>-description <id>-error"
whether or not those parts are there, and a FieldError that shows (with invalid, match)
renders with an id of its own (id="13960000068" in a Solid server render), not <id>-error. Before
hydration the control is described by nothing: the error a server marks invalid is not announced,
and a field without a description points aria-describedby at a missing id. After hydration the
client rewrites both and the description is right.

Minimal reproduction

@ui-sdk/solid/field, Solid 2.0.0-rc.21 renderToString:

renderToString(() => (
	<Field invalid>
		<FieldLabel>Handle</FieldLabel>
		<FieldControl />
		<FieldError match>That handle is taken.</FieldError>
	</Field>
))
// <input … aria-describedby="ui-sdk-1-description ui-sdk-1-error" aria-invalid="true" …>
// <div data-slot="field-error" id="13960000068" data-invalid>That handle is taken.</div>
// no element has id="ui-sdk-1-description" or id="ui-sdk-1-error"
Versions

@ui-sdk/solid and @ui-sdk/core 0.1.0-beta.1, Solid 2.0.0-rc.21, Chrome for Testing.

Expected

The server writes aria-describedby with the ids of the description and error parts that render
(the error with the id it is referenced by), and leaves out parts that are not there, as the client
does after hydration.

Reproduced on @ui-sdk/core / @ui-sdk/solid 0.1.0-beta.2.

Dominant language
TypeScript
Stars
4.4k
Forks
122
Avg merge
3h 12m
Merged PRs (30d)
437

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vercel-labs/ui

All issues in vercel-labs/ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.