Skip to content
New issue

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

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

Already on GitHub? # 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
# for free to join this conversation on GitHub. Already have an account? # 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