[react-aria-componets]: Checkbox imposible to visit links defined in Label

[mauron85]

Provide a general summary of the issue here

Checkbox manages onClick events in a way, that prevent links used in Label to be visited.

🤔 Expected Behavior?

Should be able to follow (click) link from within Label.

😯 Current Behavior

Checkbox currently checks the checkbox instead of visiting link.

💁 Possible Solution

No response

🔦 Context

I would like to create list of consents using checkboxes, where in label there can be links.

🖥️ Steps to Reproduce

Click on Link

https://codesandbox.io/p/sandbox/elastic-monad-c2chtf

Version

1.1.1

What browsers are you seeing the problem on?

Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 10

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[mauron85]

I think can be related to #6235

[sookmax]

I think can be related to #6235

Maybe #1166 is more relevant to your case?

[mauron85]

@sookmax I agree with conclusing made in #1166

so this is problematic for accessibility, a checkbox label should, when clicked, toggle the checkbox
by putting a link in it, you’ve conflated the two actions

Unfortunatelly this label text (with link) is from api call, so it cannot be just splitted into two separate components.

As result, I would accept, that this use case, will not be supported. Please let me know.

In that case, I would change implementation for simple html checkbox + label.

[reidbarber]

Links or buttons inside labels should be avoided:

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content

I would consider separating that into two elements: a short label, and longer details (which includes the link). You can add an aria-describedby that references the details to the label.

[mauron85]

understand. however text with links is coming from api request and no control to separate them. ok, i will use plain checkbox

[snowystinger]

I mean, you're just getting a string from the API, you could probably split it yourself with a regex. I'm going to close this as we won't be allowing a link in a checkbox label though, it's not accessible.