search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.86k stars 6.97k forks source link

[Bug Report][3.7.1] ADA Compliance Issue: Form input controls embed label in HTML output when no label attribute is set. #20427

Open jasonatvelocity opened 1 month ago

jasonatvelocity commented 1 month ago

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 commented 1 month ago

Tagging the following link as this is a problem that needs to be addressed: https://github.com/vuetifyjs/vuetify/issues/18793

image