Fix incorrect label for use in HTML

[aeneasr]

Preflight checklist

• [x] I could not find a solution in the existing issues, docs, nor discussions.
• [x] I agree to follow this project's Code of Conduct.
• [x] I have read and am following this repository's Contribution Guidelines.
• [ ] I have joined the Ory Community Slack.
• [ ] I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe the bug

Reproducing the bug

Open a page with a label

Relevant log output

Relevant configuration

Version

master

On which operating system are you observing this issue?

None

In which environment are you deploying?

None

Additional Context

No response

[jonas-jonas]

The fix is to use the name as the id on the corresponding input as well.

[aeneasr]

You'll likely get duplicated IDs, and IDs don't generally work well when it's embedded as a library. I suggest a different solution, I think it can be done with proper HTML nesting

[aeneasr]

Ideally, the label would wrap the input, in which case htmlFor is not required.

[jonas-jonas]

The problem is, that we have <button> elements (namely the resend button) inside the "label" if we make it wrap the input.

E.g. (simplified)

<label>
	<span>Code</span>
	<button>Resend code</button>
	<input />
</label>

This sort of set up will trigger the resend code button, if the label is clicked. See also here: https://stackoverflow.com/questions/73023855/button-inside-label-triggers-sometimes-double-trigger-double-click

It's also against the spec, to place "labelable elements inside a label, except for the item being labeled".

Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

So I think my initial assessment is correct: The only way to solve this is to use the id attribute correctly on all input elements.

[aeneasr]

Ok, then let’s just generate random IDs in the top level component and pass them down. labelId comes to mind