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 Report][3.7.1] ADA Compliance Issue: Form input controls embed label in HTML output when no label attribute is set. #20427

Closed
jasonatvelocity opened this issue Sep 4, 2024 · 1 comment · Fixed by #20722
Assignees
Labels
a11y Accessibility issue C: VField T: bug Functionality that does not work as intended/expected
Milestone

Comments

@jasonatvelocity
Copy link

Environment

Vuetify Version: 3.7.1
Vue Version: 3.5.1
Browsers: Chrome 128.0.0.0
OS: Windows 10

Steps to reproduce

This is very simple to reproduce.

  1. Add a v-text-field to page (or any input control).
  2. Don't pass in a label in the label attribute.
  3. Inspect the HTML element on the page and notice the following code is embedded in page:
  4. This is a problem, it violates ADA compliance testing and throws errors using validation tools such as WAVE Evaluation Tool (Chrome plugin).
  5. There are scenarios where we need to implement a separate label outside of the embedded text field. We should not have to write separate code to remove these embedded HTML elements from vuetify components.

If I am missing something or there is some way of turning off this element from displaying in the page please let me know. I reviewed the documentation and did not see anything.

Expected Behavior

If no label attribute is passed in an empty label should not appear on the page OR we need a way to remove this from the DOM.

Actual Behavior

No label attribute is set and component embeds label element in page causing ADA compliance issues for users.

Reproduction Link

https://play.vuetifyjs.com/#...

@jasonatvelocity
Copy link
Author

Tagging the following link as this is a problem that needs to be addressed:
#18793

image

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected a11y Accessibility issue C: VField labels Sep 5, 2024
@KaelWD KaelWD added this to the v3.7.x milestone Sep 5, 2024
@github-actions github-actions bot removed the S: triage label Sep 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility issue C: VField T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants