[Label] Is not working when JS is disabled in the browser

[Haberkamp]

Bug report

Current Behavior

When there is a label element and a input element and both are "linked" with the same id then clicking the label element should move the focus to the input element. This will happen if the user has enabled javascript but not when the user has disabled js.

Expected behavior

Clicking the label should focus the checkbox or any other input element.

Reproducible example

CodeSandbox Template

Suggested solution

Swap out the rendered span element with a label element.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)		1.0.0
React	n/a	18
Browser	chrome	n/a
Assistive tech	n/a	n/a
Node	n/a	n/a
npm/yarn	yarn	n/a
Operating System	MacOS	Monterey

[andy-hook]

Hi @Haberkamp, Thanks for raising, this would be due to Radix opting not to render a native label for the accessibility reasons described in #638 (comment) , though it's on our list to revisit this and test whether this has improved since #1233 (comment)

For now I'm going to close this as duplicate as it is covered by #1233

Edit – I noticed you already described this cause / solution in your description, hopefully my comment is helpful anyway.

🙏