search

jsx-eslint / eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements.
MIT License
3.38k stars 637 forks source link

label-has-associated-control documentation source? #773

Open kand opened 3 years ago

kand commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.