Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: axe validation fails when using radio group "Interactive controls must not be nested" #1597

Open
pmairoldi opened this issue Jan 31, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@pmairoldi
Copy link
Contributor

Environment

Node version: v18.20.3
Radix Vue version: 1.9.12
Vue version: 3.5.13

Client OS: macOS 12.7.6
Browser: Chromium Engine Version 131.0.6778.265

Link to minimal reproduction

https://www.shadcn-vue.com/docs/components/radio-group#form

Steps to reproduce

  • run axe DevTools on page
  • validate the result

Describe the bug

After running the axe devtools on RadioGroup component there are errors due to RadioItems having inputs inside the button.

Image

shadcn-vue example

Image

Expected behavior

The expected behaviour should be that the input is outside the button. An example of this can be seen in the react shadcn examples.

https://ui.shadcn.com/docs/components/radio-group/#form

Image

Context & Screenshots (if applicable)

No response

@pmairoldi pmairoldi added the bug Something isn't working label Jan 31, 2025
@pmairoldi
Copy link
Contributor Author

@zernonia I can create a PR for this but not too sure if this would cause too many breaking changes for current users

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant