feat: associate all inputs with labels via unique IDs

[LBBO]

Related Issue or Design Document

Originated in SEO improvements for the website, but should benefit everyone :) Having inputs and labels associated with each other improves accessibility, as screen readers know how to announce inputs better. It also improves things for sighted users, as the inputs become focusable / toggleable via a click on the label. Using unique IDs is good for avoiding ID collisions with users' websites and necessary for allowing multiple uses of the same component.

Checklist

• [X] I have read the contributing guidelines and signed the CLA.
• [ ] I have referenced an issue containing the design document if my change introduces a new feature.
• [X] I have read the security policy.
• [X] I confirm that this pull request does not address a security vulnerability. If this pull request addresses a security vulnerability, I confirm that I got green light (please contact security@ory.sh) from the maintainers to push the changes.
• [ ] I have added tests that prove my fix is effective or that my feature works.
• [X] I have added necessary documentation within the code base (if appropriate).

Further comments

[LBBO]

Just realized: is changing the nav ID from a constant to something dynamic potentially a breaking change for some people? If so, maybe that particular change should be reverted

[Benehiko]

Just realized: is changing the nav ID from a constant to something dynamic potentially a breaking change for some people? If so, maybe that particular change should be reverted

We use the nav inside AX https://github.com/ory/kratos-selfservice-ui-node but i don't think it should break anything. the tests rely on either the test-id or the url of the link/button. Input fields have names from kratos which are also relied upon.

[Benehiko]

We should actually just need to check if the hook is usable inside AX since it's using the ReactDOMServer.renderToStaticMarkup() function

[LBBO]

Seems to be possible, if the DOM structure is identical on server and client

With server rendering, useId requires an identical component tree on the server and the client. If the trees you render on the server and the client don’t match exactly, the generated IDs won’t match.

https://react.dev/reference/react/useId

[Benehiko]

Have you been able to verify if this works?

[LBBO]

Didn't work before; works now 🎉