label-has-associated-control documentation source?

[kand]

In the documentation for label-has-associated-control, it says the following:

IDs shouldn't be generated in the browser, so that server and client rendering are deterministic. Render-time uuids aren't just a hack, they're actually broken and should never be used.

To restate, every ID needs to be deterministic, on the server and the client, and guaranteed to be unique on the page. EG: For each input, a required ID prop can be passed down from as far up the tree as possible to guarantee uniqueness.

Is there a source for the claim that "they're actually broken"? If you're using a UUID that's sufficiently unique what are the possible issues with this approach?

[ljharb]

This was added in #530, and #528 outlines a number of the issues with them.

The issue is that uniqueness is irrelevant - you need determinism, and nothing generated on the client is guaranteed to be both unique and also deterministic.

[kand]

Is this only an issue with server + client side rendering? Is this part of an accessibility spec and/or do screen readers have an issue with non-deterministic IDs? I'm discussing this rule among teammates and not able to find a concrete reason we can't use IDs generated on the front end and/or back end since, for our purposes, it's primarily for just connecting labels to their form elements.

Thanks!

[ljharb]

It's primarily an issue with server + client rendering, but that is required for a11y anyways. In particular, you want your server HTML to match what your client renders, which means the IDs should be the same.